vue-cli3/cli2 编译生产环境和测试环境

vue-cli3/cli2 编译生产环境和测试环境

思路

根据process.env(node环境信息).NODE_ENV(自定义变量/常用于区分生产环境和测试环境)的不同来改变Axios的baseURL,从而达到编译生产环境和测试环境

vue-cli3

1.根目录新建.env.[自定义名称NAME]
2.写入NODE_ENV = ‘[自定义名称NAME]’

3.在入口文件main.ts判断process.env.NODE_ENV
设置Axios的baseURL

4.在package.json写入"’[自定义名称NAME]’": “vue-cli-service build --mode ‘[自定义名称NAME]’”,

5.运行npm run [自定义名称NAME]编译

---

附加 编译生成在对应文件夹里

1. 在.env. '[自定义名称NAME]'里写入outputDir = ‘[自定义名称NAME]’
2. 在vue.config.js更改配置 outputDir: process.env.outputDir
3. 编译后会生成自己定义名称的文件夹在根目录下

Vue-cli2

1. 在build文件下copy一份build.js
   Rename一波 自定义名称NAME
   
   修改=>嵌入对应的配置文件
   
2. 在build文件下copy一份webpack.prod.conf.js
   Rename一波 相同自定义名称NAME
   修改=>嵌入对应的配置文件
   =>通过修改output.path和HtmlWebpackPlugin.filename的相对路径来修改编译后生成的文件夹和index.html路径
   
   
3. 在config文件下copy一份prod.env.js
   Rename一波 相同自定义名称NAME
   修改=>嵌入对应的配置文件
   
4. 在pakeage.json写入"[自定义名称NAME]": “node build/[自定义名称NAME].js”
5. 同样在判断NODE_ENV 设置Axios的baseURL
6. 编译npm run alpha
7. over!全在alpha文件夹里

参考

[1] https://www.cnblogs.com/XHappyness/p/9337229.html
[2] https://www.jianshu.com/p/30d30d2835b2