vue不同环境打包配置不同 vue环境变量配置

vue-clic创建vue项目

可以创建vue2和vue3项目，可以看文章安装vue-cli2和3以及创建vue2和vue3项目的步骤及区别
可以用vue init webpack pro1创建vue2项目，（这种方式创建的 vue和webpack版本分别为
"vue": "^2.5.2","webpack": "^3.6.0","webpack-dev-server": "^2.9.1","vue-router": "^3.0.1"）

也可以用最新的vue-cli命令vue create pro2
创建vue2("vue": "^2.6.14","webpack": "^5.54.0","webpack-dev-server": "^4.11.1","vue-router": "^3.5.1", "vuex": "^3.6.2")
vue3项目("vue": "^3.2.13","webpack": "^5.54.0","webpack-dev-server": "^4.11.1","vue-router": "^4.0.3", "vuex": "^4.0.0",)

我们主要看vue-cli2和vue3+打包出来的vue2项目

打包出来的文件直接在浏览器打开

1. vue-cli2+打包出来的项目，在浏览器上打开报错
   
   解决办法:
   在config文件夹下的index.js中修改 assetsPublicPath: ‘./’

vue-cli3在vue.config.js中加publicPath:'./'

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'./'
})

vue 不同环境打包 配置不同

vue-cli2+打包的项目

工具：cross-env

工具：cross-env：运行跨平台设置和使用环境变量的脚本
理解：当您使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。这个迷你的包(cross-env)能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。

1. 安装cross-env

npm install --save-dev cross-env

2. 建立环境配置

默认config文件夹有三个文件，dev.env.js/index.js/prod.env.js
打包不同环境设置不同变量，比如，打sit包，uat包，对生产加不同变量文件配置
config->prod.sit.env.js文件

'use strict'
module.exports = {
  // 生产环境，上线时使用此配置
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  KEY: '"2222222PRODDEVSHKLO667DDDD"'
}

config->prod.uat.env.js文件

'use strict'
module.exports = {
  // uat环境专用配置
  NODE_ENV: '"production"',
  ENV_CONFIG: '"uat"',
  KEY: '"33333333UATVSHKLO667DDDD"'
}

环境变量也可以引入变量；比如：
可以把请求的路径设置成变量，在命令行中去赋值

"build:test": "cross-env NODE_ENV=production env_config=test request_url=https://111.222.com  node build/build.js"


const {request_url = ""} = process.env;
module.exports = {
    NODE_ENV: '"production"',
    BASE_API: `'${request_url}'`
};

env配置文件，不是在浏览器运行的，也不会打包进最终的代码，它只是对于项目编译的控制，所以拿不到window

3. 在npm脚本中使用

"build--sit":"cross-env NODE_ENV=production  ENV_CONFIG=sit  node build/build.js",
"build--uat":"cross-env NODE_ENV=production  ENV_CONFIG=uat  node build/build.js",
"build--dev":"cross-env node build/build.js",

4.webpack打包文件解析打包命令

通过打包命令（比如：npm run build--uat），获取到NODE_ENV=production ENV_CONFIG=uat两个参数
在build -> webpack.prod.conf.js文件中获取命令行参数，并引入配置

const env = process.env.ENV_CONFIG ? 
require('../config/prod.' + process.env.env_config + '.env') : 
require('../config/prod.env')

5.在项目中使用变量

<template>
  <div id="app">
    测试环境变量{{ test }}
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      test: process.env.KEY,
    }
  }
}
</script>

6.打包文件成功引用对应环境变量

webpack-dev-server2+ 不支持–mode参数

vue-cli3+打包的项目

一、通过在项目的根目录下新建 .env.xxx 文件，–mode去识别环境变量的方式

1. 在项目的根目录下新建 .env.xxx 文件
   
   如上，四个 .env.xxx 文件后缀名（文件后缀名可自定义）为development、prod、prod.uat、test，可分别对应为开发环境、生产环境、uat环境和测试环境。可以根据需要自由创建，只要到时候对应到命令行中，能找得到就行

2. 每个环境都会加载的变量 .env
   如果还需要设置每个环境都需要加载的变量，则可以添加 .env 文件，如果没有，则可以不建此文件。（即每个环境对应变量的变量值都是一样的时候，则可以将变量定义在公用的.env文件中，而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量）

3. 在对应环境的 .env.xxx 文件中添加变量
   .在.env.xxx 文件中只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

• NODE_ENV : 主要用于标识当前的环境
• BASE_URL: vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径
• VUE_APP_* : 自定义变量

.env.development

NODE_ENV=development
VUE_APP_TESTID=121212development

.env.prod

NODE_ENV=production
VUE_APP_TESTID=1ddddddd

.env.prod.uat

NODE_ENV=production
VUE_APP_TESTID=UATtttt1ddddddd

可以根据需要，自由添加配置文件，只要命令行与文件名一致就行
4. package.json配置对应环境打包命令

"serve:dev": "vue-cli-service serve --mode development",
"serve:test": "vue-cli-service serve --mode test",
"serve:prod": "vue-cli-service serve --mode prod",
"serve:uat": "vue-cli-service serve --mode prod.uat",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode prod",
"build:test": "vue-cli-service build --mode test",

vue-cli-service build --mode test :命令中的test对应的是 .env.xxx 文件的后缀名，如果也找不到.env.test文件，则打包报错

注意，vue-cli2+打包的vue2项目没有–mode参数，不能用这种方式设置环境变量
5. 在vue组件中和index.html中使用变量

在inde.html中这么引入变量<%= VUE_APP_TESTID %>
在组件中还是这么引入process.env.VUE_APP_TESTID

二、通过cross-env的方式

思路还是一样的，命令行设置一个变量ENV_CONFIG=prod，在配置文件中获取，然后根据变量值，去获取对应的配置文件，然后赋值给process.env

1. 安装cross-env

npm install --save-dev cross-env

2. 建立环境配置
   新建config文件夹，新建prod.[对应命令行变量].env.js打包不同环境设置不同变量，比如，打sit包，uat包，对生产加不同变量文件配置
   config->prod.sit.env.js文件、config->prod.uat.env.js文件等

'use strict'
module.exports = {
  ENV_CONFIG: '"prod"',
  VUE_APP_KEY: '"2222222PRODDEVSHKLO667DDDD"'
}

3. 在npm脚本中使用

"serve": "vue-cli-service serve",
"serve:test": "cross-env NODE_CONFIG=test vue-cli-service serve",
"build": "vue-cli-service build",
"build:env1": "cross-env NODE_CONFIG=prod vue-cli-service build",
"build:env2": "cross-env NODE_CONFIG=uat vue-cli-service build",
"lint": "vue-cli-service lint"

4. webpack配置文件 vue.config.js 解析打包命令
   通过打包命令（比如：npm run serve:test），获取到NODE_CONFIG=test参数

在 vue.config.js文件中获取命令行参数，并引入配置

console.log(NODE_CONFIG)
const env = process.env.NODE_CONFIG? 
require('../config/prod.' + process.env.NODE_CONFIG+ '.env') : 
require('../config/prod.env')
console.log(env)

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': env
      })
    ]
  }

但是会报错重复定义process.env，后续还得查查怎么完善

5. 在项目中使用变量

process.env.VUE_APP_KEY