vue3配置测试环境、开发环境、生产环境

原创已于 2024-08-02 11:34:52 修改 · 2.4k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

vue

于 2024-04-29 11:23:25 首次发布

本文详细介绍了如何在Vue3项目中配置开发环境、测试环境及生产环境，包括.env文件的设置、vue.config.js及vite.config.js的调整，以及如何通过package.json执行不同环境的构建。

第一步：在src同级新建 .env.production 、.env.test 、.env.development文件
在这里插入图片描述
第二步：在文件中配置开发环境、生产环境、测试环境

		// 开发环境 .env.development
		NODE_ENV = 'development'
		VUE_APP_MODE = 'development' 
		outputDir = dist_dev // 打出包的名称
		VUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/

		// 生产环境 .env.production
		NODE_ENV = 'production'
		VUE_APP_MODE = 'production'
		outputDir = dist_pro
		VUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/

		// 测试环境 .env.test
		NODE_ENV = 'alpha' // 此处不能为test，否则会报错
		VUE_APP_MODE = 'alpha'// 此处不能为test，否则会报错
		outputDir = dist_test
		VUE_APP_BASE_URL = http://xxxxxxxxxxxx:xxxx/

第三步：在vue.config.js中
在这里插入图片描述

第四步：在package.json中配置

 "scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode development", //打开发环境包  npm run build:dev/yarn build:dev
    "build:test": "vue-cli-service build --mode test",// 打测试环境包
    "build:prod": "vue-cli-service build --mode production",// 打生产环境包
    ......
  },

注意：测试环境配置.env.test时候，NODE_ENV = ‘alpha’ ，VUE_APP_MODE = ‘alpha’// 此处不能为test，否则会报错

使用vue3.x的vite打包时，配置需注意的点

第二步必须使用VITE开头，
例如：

VITE_APP_MODE = 'production'
VITE_OUTPUTDIR = dist_prod
VITE_APP_BASE_URL = http://XXXXXXXXXXXXXXXXXXX/

第三步在vite.config.js中需要注意

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, './'); 
  return {
    plugins: [vue(), viteCommonjs(), viteCompression()],
    build: {
     // 其他配置  
      outDir: env.VITE_OUTPUTDIR // 修改打出来的dist包的名称
    },
    server: {
      proxy: {

        "/api": {
          target: env.VITE_APP_BASE_URL,
       	 //其他配置...
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  }
})