Vue分环境打包

小鱼儿 2023-02-23 08:44 45阅读 0赞

*  在项目开发过程中，我们的项目一般分为开发版，测试版，生产版，之前每次发布不同的版本都需要在源码中修改api地址然后再次打包，这样就很麻烦，如果可以根据不同环境进行打包就完美了。

### 下面就来介绍如何进行分环境打包(前提是你已经创建好了一个vue项目，我这里用的是vue4) ###

**第一步：打包package.json文件**

可以看到scripts

我们添加一个test打包环境

"test":"vue-cli-service serve --mode test"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

解释： serve是运行命令，serve默认运行的环境是development环境

build是打包命令， build默认打包的环境是production环境

npm run serve //运行项目
    npm run test // 运行test环境项目
    npm run build //默认打包production环境项目

**第二步：在根目录下新建文件.env.test 并且 添加代码**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1][]

NODE_ENV = 'test'
    VUE_APP_TITLE = 'test'
    VUE_APP_One = 'http://888.888.888.88'
    outputDir="heyufu-bu ild-test"

继续创建环境文件.evn.prod

NODE_ENV = 'prod'
    VUE_APP_TITLE = 'prod'
    VUE_APP_One = 'http://999.999.999.99'
    outputDir="heyufu-build-prod"

将prod环境追加到package.json文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2][]

**第三步：那么如何获取到我们不同环境的不同api地址呢？**

通过：

console.log(process.env.VUE_APP_One)

我在登陆页面做了测试：

![20200706175642769.png][]

然后通过命令   npm run serve 启动项目

![20200706175716412.png][]

控制台结果：

![20200706175733482.png][]

**发现找不到，这是为什么？**

**注意！！ 要打印的process.env.VUE\_APP\_One 是在不同环境下的api，serve默认下运行的是development环境，我这里没有这个环境，所以找不到地址**

**所以我们需要运行不同的 运行命令**

我们现在有test环境和prod环境，我们现在分别来运行一下，在控制台中分别显示他们不同环境下的不同api地址

运行test环境：

npm run test

![20200706180106688.png][]

运行成功结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 3][]

**可以看到这个时候的VUE\_APP\_One打印出来的就是我们上面在 .env.test文件中写的地址**

运行prod环境：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 4][]

可以看到这个时候的VUE\_APP\_One打印出来的就是我们上面在 .env.prod文件中写的地址

**第四步：运行完了，我们要开始打包的过程：**

我们在打包之前需要在package.json中添加不同环境的打包命令

默认的build是打包production，但是我们当前的系统没有production环境，我们需要指定不同环境的打包命令：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 5][]

进行分环境打包：

npm run build

生成test环境的打包文件

![20200706180557820.png][]

npm run build:prod

![20200707082953530.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070617502753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200706175425369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200706175550215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[20200706175642769.png]: https://img-blog.csdnimg.cn/20200706175642769.png
[20200706175716412.png]: https://img-blog.csdnimg.cn/20200706175716412.png
[20200706175733482.png]: https://img-blog.csdnimg.cn/20200706175733482.png
[20200706180106688.png]: https://img-blog.csdnimg.cn/20200706180106688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200706180136446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200706180319645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200706180520169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[20200706180557820.png]: https://img-blog.csdnimg.cn/20200706180557820.png
[20200707082953530.png]: https://img-blog.csdnimg.cn/20200707082953530.png