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

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

思路

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

vue-cli3

1.根目录新建.env.[自定义名称NAME]
2.写入NODE_ENV = ‘[自定义名称NAME]’
vue-cli3/cli2 编译生产环境和测试环境_第1张图片
3.在入口文件main.ts判断process.env.NODE_ENV
设置Axios的baseURL
vue-cli3/cli2 编译生产环境和测试环境_第2张图片
4.在package.json写入"’[自定义名称NAME]’": “vue-cli-service build --mode ‘[自定义名称NAME]’”,
vue-cli3/cli2 编译生产环境和测试环境_第3张图片
5.运行npm run [自定义名称NAME]编译
vue-cli3/cli2 编译生产环境和测试环境_第4张图片


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

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

Vue-cli2

  1. 在build文件下copy一份build.js
    Rename一波 自定义名称NAME
    在这里插入图片描述
    修改=>嵌入对应的配置文件
    vue-cli3/cli2 编译生产环境和测试环境_第5张图片
  2. 在build文件下copy一份webpack.prod.conf.js
    Rename一波 相同自定义名称NAME
    修改=>嵌入对应的配置文件
    =>通过修改output.path和HtmlWebpackPlugin.filename的相对路径来修改编译后生成的文件夹和index.html路径
    vue-cli3/cli2 编译生产环境和测试环境_第6张图片
    vue-cli3/cli2 编译生产环境和测试环境_第7张图片
  3. 在config文件下copy一份prod.env.js
    Rename一波 相同自定义名称NAME
    修改=>嵌入对应的配置文件
    vue-cli3/cli2 编译生产环境和测试环境_第8张图片
  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

你可能感兴趣的:(vue-cli3/cli2 编译生产环境和测试环境)