vue - 多环境配置总结

总结几点，超级重要：
不可使用关键字pro和test ,因此才会使用prod和tes

下面解说的截图使用的是test关键字，随笔写的比较早，现在需要改正，截图就不改了，知道就行

使用test关键字的 bug 发现场景:
使用test配置文件打包，会导致，打包的文件在浏览器使用时，报错，提示 动态路由 无法加载vue页面 ， 具体的报错体现为

Cannot find module '../views/xxx' 

如
Cannot find module '../views/mymenu/module/manage/account/manageacco' 

1.添加自定义多环境配置文件

 

我这里加了三个，分别是本地、生产、测试环境的配置文件

dev内容

#.env.dev  开发环境
NODE_ENV='dev'
VUE_APP_CURENV='dev'
VUE_APP_HOST = "http://localhost:8100"

其他的两个

#.env.pro  开发环境
NODE_ENV='prod'
VUE_APP_CURENV='prod'
VUE_APP_HOST = "https://域名1"

#.env.test 测试环境的配置
NODE_ENV='tes'
VUE_APP_CURENV='tes'
VUE_APP_HOST= "域名2"

2.package.json 文件添加指令配置

 

 

    "serve": "vue-cli-service serve --mode dev --open",
    "dev": "vue-cli-service serve --mode dev --open",
    "build:dev": "vue-cli-service build --mode dev",
    "build:tes": "vue-cli-service build --mode tes",
    "build:prod": "vue-cli-service build --mode prod",

 

3.在根路径添加 config.js 文件，当然，其他的名字也可以

 

将需要的内容导出即可被需要的地方import来使用

let BASE_URL = process.env.VUE_APP_HOST;
export default BASE_URL;

4.使用配置文件数据，路径需要改成自己的

 

 

import BASE_URL from "../../../config";

let host = BASE_URL