vue项目打包配置多环境

在开发过程中经常遇到这样的情况，开发或者打包需要去请求后台的不同环境（测试环境，预上线环境，正式环境），虽然可以去改动手动的去改变axios的请求前缀，但是难免会出现忘记更改过来的情况，造成一下不必要的时间浪费，因此，这边文章主要教大家如何配置利用命令行进行不同环境的切换运行。
1.更改package.json文件，提供运行的命令

"scripts": {
    "dev": "vue-cli-service serve --mode local",// 本地环境
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode prod",// 正式环境
    "build:dpl": "vue-cli-service build --mode dpl",// 开发环境
    "build:test": "vue-cli-service build --mode test",// 测试环境
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },
// 之后打包项目时，运行不同的脚本则运行不同的环境,请求不同的后台接口
npm run dev //本地
npm run build:prod //正式环境
npm run build:dpl //开发环境
npm run build:test //测试环境

2.在根目录下新建.env.local以及.env.dpl等文件

# .env.local
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://10.180.55.77/new_inner_api/public'

# .env.dpl
ENV = 'production'
VUE_APP_BASE_API = '运维给的一个变量'（例如：//$TE_INNER_HOST$/new_bs_api/）

3.在根目录下新建.htaccess文件，（如果你的路由是history模式）重写url，不然会出现404，页面找不到

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
</IfModule>

4.在根目录下新建deploy.yaml文件

config:
      - oper_bs_inner/.env.dpl

image.png
kubectl命令行管理工具、YAML配置详解,,http://www.bubuko.com/infodetail-2880702.html