vue项目打包配置多环境

Posted 2023-03-16

参考技术A

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

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

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

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

Vue-cli 2.X 如何配置多项目集成环境

参考技术A

多模块集成的 vue 项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署。
所有操作只需要使用不同操作命令即可，如 npm run dev:proj1 或者 npm run dev:proj2 。

对于以上场景可以使用一个项目管理多个子模块也是一个不错的选择

多页面 ：指一个项目有多个入口，打包是会生成多个 html 文件，实际开发过程中都是混合在一个项目中开发；
多模块 ：是指不同的业务模块可以进行拆分；各自独立运行、也可以互相引用，这一点和通过 npm 发布是类似的；
对于一些项目本身不允许发布的情况下，既可以独立开发，又不需要发布到共有仓库;

接下来我们看下具体配置步骤~~见证奇迹的时刻

build/webpack.dev.conf.js 文件 修改如下：

build/webpack.prod.conf.js 文件 修改如下:

(3). 修改 dev 配置

(4).修改 build 配置

根据不同的命令启动 或 打包 对应 的 模块项目已经完成啦 ~~~