乐趣区

关于前端:vue中env文件配置

1.env 文件配置
.env.development 开发环境文件配置

NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api
VUE_APP_PLATFORM_PORT=8766

VUE_APP_TITLE=title

.env.puhua

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api
VUE_APP_PLATFORM_PORT=9007

VUE_APP_TITLE=title1

文件中内容命名规定属性名必须以 VUE_APP_结尾,例如:VUE_APP_XXX

2.package.json 文件配置
本地执行 npm run dev 时应用.env.development 文件,配置:”dev”: “vue-cli-service serve –mode development”
打包生产环境执行 npm run build 会默认应用.env.production 文件,我这里要独自配置指令,执行 npm run build:puhua 时应用.env.puhua 文件,配置:”build:puhua”: “vue-cli-service build –mode puhua”

"scripts": {
    "dev": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint:nofix": "vue-cli-service lint --no-fix",
    "lint": "vue-cli-service lint",
    "build:preview": "vue-cli-service build --mode preview",
    "build:dev": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:puhua": "vue-cli-service build --mode puhua"
  },

3. 在文件中应用
process.env.VUE_APP_TITLE

留神:无论是开发环境还是生产环境都会执行.env 文件,如果运行 npm run dev 就会先加载.env 文件再加载.env.development;如果运行 npm run build:puhua 就会先加载.env 文件再加载.env.puhua。

退出移动版