vue多环境配置

vue多环境配置

正常的环境一般有development(开发环境)、production(正式环境)。打包它俩分别使用如下命令:
npm run serve :打包开发环境(development)的包。
npm run build: 打包正式环境(production)的包。

那么如何打包其他环境的包呢?如下几步即可实现:
第一,在根目录下,新建其他环境对应的配置文件,例如,需要一个cte2环境,那么,在根目录下新建一个.env.cte2文件,内容如下:
vue多环境配置
第二,增加在package.json文件中的命令,如下:
vue多环境配置
第三,在不同环境下,项目的BASE_URL会发生变化,需要在根目录下新建一个配置文件config.js,内容如下:
vue多环境配置
第四,在需要用到BASE_URL的地方,导入config.js文件,即可使用BASE_URL值。如下:
vue多环境配置
第五,执行命令打包cte2环境的包,npm run cte2,会生成dist文件夹及其文件夹下的index或者其他文件。如下:
vue多环境配置
第六, dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve
vue多环境配置
即可在本地访问,如下:
vue多环境配置