vue-cli3配置开发与测试环境详解-创新互联
需求
首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的不同,某些界面和交互有细微的差别。
根据以上项目的基本情况,分析出需求如下:
- 实现区分线上生产环境和线上测试环境的环境变量,供项目代码中全局使用。
- 实现输入一行命令,执行两条指令,分别打包线上生产环境和线上测试环境的代码。
- 实现打包之后,自动将打包好的文件夹分别按照项目名+时间+环境的格式压缩成 zip 文件
配置环境变量和模式
根据 vue-cli3 文档,可以通过设置项目根目录下的 .env,.env.[mode] 文件来指定环境变量。
创建一个 .env 和 .env.beta 文件,在 .env 文件中,配置如下:
VUE_APP_URL = '/' // 用来设置项目的 baseUrl 和路由的 base 选项 默认是根目录 VUE_APP_MODE = '' // 设置一个变量 区分线上生产环境和线上测试环境 默认是生产环境 outputDir = 'dist' // 用来设置打包后生成的文件夹的名字,默认为 dist 文件夹
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享题目:vue-cli3配置开发与测试环境详解-创新互联
标题来源:http://ybzwz.com/article/ccdjhs.html