Vue2 多环境打包和运行指令配置

为了配这个多环境打包,没少爬坑,所以记录下。

网上查了下vue-cli3和vue-cli2的配置方法不一样,我这次使用的是vue-cli2。

一、多环境打包命令(以test为例)

1、在config目录下新建test.env.js文件,

Vue2 多环境打包和运行指令配置_第1张图片

并将prod.env.js文件夹内容copy到test.env.js中,将NODE_ENV修改为testing并添加api的base_url.

Vue2 多环境打包和运行指令配置_第2张图片

2、在api管理文件中配置api的base_url,const baseURL = process.env.API_HOST;

3、在build文件建中新建test.js文件,将build.js中的内容copy到test.js中,并进行相应的修改,如下图:

Vue2 多环境打包和运行指令配置_第3张图片

5、在build文件夹中新建webpack.test.conf.js文件并copy  webpack.prod.conf.js文件内容,然后作如下修改:

Vue2 多环境打包和运行指令配置_第4张图片

Vue2 多环境打包和运行指令配置_第5张图片

 

6、修改package.json文件,如图

Vue2 多环境打包和运行指令配置_第6张图片

打包时直接 npm run build:test就好了,

 

二、多环境运行指令

1、在build文件下新建webpack.dev_test.conf.js文件,copy webpack.dev.conf.js文件内容,并进行如下修改:

Vue2 多环境打包和运行指令配置_第7张图片

3、修改package.json文件

Vue2 多环境打包和运行指令配置_第8张图片

运行指令:npm run start:test

第一次配置这些,很多地方还有待改进,

路过的大神要是有什么好的建议,麻烦多多指教,不喜勿喷哟~~。

 

2019年10月23日:

上述方法配置起来有点繁琐,查找资料发现使用node 的yargs配置多环境更优雅,有兴趣的可以看看这篇文章

 

你可能感兴趣的:(Vue)