Vue-CLI环境变量和模式

1、官方文档

2、场景

• 本地开发时请求地址，线上环境请求地址，不一致，部署路径不一致，其他环境变量因为部署环境不一致，方便打包和开发

3、代码

1、项目结构

• .env 是所有的环境中都会被载入
• .env.dev 是在指定模式中被载入
• .env.product 是在指定模式中被载入

.env

NODE_ENV=local
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://ip:8080/local/

.env.product

NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://ip:8080/production/

.env.dev

NODE_ENV=dev
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://ip:8080/dev/

package.json

"scripts": {
    "dev": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode dev",
    "build:pro": "vue-cli-service build --mode product",
    "lint": "vue-cli-service lint"
  },

vue.config.js

module.exports = () => {
  console.log('ENV=' + process.env.NODE_ENV)
  console.log('BASEURL=' + process.env.VUE_APP_API_BASE_URL)
  return {
    publicPath: '/CMS/'
  }
}

4、结果

npm run dev

npm run build:dev

npm run build:pro