记录 vue-cli3 配置uat环境 遇到的打包问题[通俗易懂]

记录 vue-cli3 配置uat环境 遇到的打包问题[通俗易懂]今天给前端页面配置一个新的可供切换的环境UAT:修改package.json的scripts:”scripts”:{“serve”:”vue-cli-serviceserve”,”build”:”vue-cli-servicebuild”,”build:uat”:”vue-cli-servicebuild–modeuat”,…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

今天给前端页面配置一个新的可供切换的环境UAT:

修改 package.json 的 scripts :

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:uat": "vue-cli-service build --mode uat",
    "lint": "vue-cli-service lint"
}

在根目录下新建一个专用于UAT打包的配置文件:.env.uat

# 测试环境下配置

VUE_APP_API=http://bbbb.aaa.com/server

VUE_APP_VERSION =1.0.0

但是!!如果直接运行打包 yarn build:uat  会发现所有的css都打到js中,并且打包出来的目录中没有js和css文件。解决方案是:

修改 . env.uat

# 测试环境下配置

#表明这是生产环境(需要打包)
NODE_ENV=production 

VUE_APP_API=http://bbbb.aaa.com/server

VUE_APP_VERSION =1.0.0

即可修复问题。

注意,这里.env文件只有以 VUE_APP_ 打头的变量才能在打包的过程中访问到。

比如我想添加一个变量用于处理发布路径,我可以在配置文件中,加入

#配置发布的路径
VUE_APP_PUBLIC_PATH=/xxxx/xxxx/

使用的例子:vue.config.js

// 基础路径 注意发布之前要先修改这里
let baseUrl = process.env.VUE_APP_PUBLIC_PATH;

module.exports = {
    publicPath: baseUrl, 
    lintOnSave: true,
    devServer: {
        publicPath: baseUrl, 
        ……
        ……

    }
}

 

 

 

 

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188231.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • sublimetext3 激活码(最新序列号破解)

    sublimetext3 激活码(最新序列号破解),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
    1.2K
  • java.net.SocketTimeoutException: connect timed out 的解决办法

    java.net.SocketTimeoutException: connect timed out 的解决办法问题概述在项目中使用FastDFSClient上传图片/文件时,一直上传失败的,报错:java.net.SocketTimeoutException:connecttimedout表示连接失败的,错误信息部分截图如下:具体信息如下:2020-03-0816:41:12,423[localhost-startStop-1-SendThread(192.168.159…

    2022年10月20日
    4
  • CSS 边框 阴影 效果

    CSS 边框 阴影 效果

    2022年2月2日
    63
  • js 打开新页面/js 重定向页面

    js 打开新页面/js 重定向页面1 nbsp 打开新 window open http www baidu com aaa abc 2 重定向 window location href www google com g id

    2025年11月17日
    4
  • 深度学习-10:人工智能简史及三剑客

    深度学习-10:人工智能简史及三剑客深度学习-10:人工智能简史及三剑客CSDN专栏:机器学习&深度学习(理论/实践)1人工智能简史深度学习理论的突破和深度学习硬件加速能力的突破,使AI在模式识别、无人驾驶、智力游戏领域取得空前的成功。学术界和工业界全力以赴掀起人工智能的新一轮热潮。各大互联网巨头纷纷成立人工智能研究中心,唯恐在新一轮人工智能的竞赛被无情淘汰。如今,机器学习的应用已遍及人工智能的各个分支,如专…

    2022年9月30日
    4
  • hybrid app开发教程_公司员工大会历程分享

    hybrid app开发教程_公司员工大会历程分享关于这个话题,本文并不准备详述移动开发相关的一些通用技术,例如:viewport、rem、flexbox、媒体查询等。这里主要讲述我们的hybrid产品策略、开发流程与规范、性能优化以及我们踩过的坑。而往往就是这些,网上相关的资料相对比较匮乏的,又缺少类似经验文章,所以希望通过此篇文章,跟大家分享一些魅族团队关于hybrid产品开发的经验。产品背景我们希望这一类产品具备比较强大的

    2022年9月22日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号