vue实现分环境进行打包

vue项目最简单得打包方式就是：npm run dev,但是有时候会遇到多个环境且地址不同，比如本地开发环境， 开发环境和测试环境，预发环境等等地址各不相同，如果每次都让我们手动更改地址，然后进行打包，那是相当麻烦，下面就给大家介绍通过配置命令来进行切换地址

1.下载插件

npm install cross-env –save-dev 

2.在config文件夹下面,按照如下进行修改

(1) test.env.js

image.png
(2) prod.env.js
image.png
(3) dev.env.js
image.png
如果还有预发环境或者其他环境，可以自己在config文件夹中创建文件，然后命名即可
（4） index.js
image.png
代码如下

        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),

4.在build文件夹下安装如下进行修改

(1).build.js

image.png

代码如下

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )

（2）webpack.prod.conf.js

image.png

代码如下

const env = config.build[process.env.env_config+'Env']  

5.在package.json中，按照如下进行修改

image.png

代码如下

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

6.根据不同环境配置地址

image.png

6.打包命令

测试环境  npm run build--test
正式环境  npm run build--prod