记录 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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 分布式与集群的区别是什么?

    分布式与集群的区别是什么?

    2021年11月7日
    36
  • idea for mac 2019版本 激活码破解方法

    idea for mac 2019版本 激活码破解方法,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    34
  • 数据库学习网站

    数据库学习网站Access中国ACCESSXPFAQ网站http://bcd.office-cn.net/对ACCESSXP技术精品文章、FAQ和参考手册都进行整理归类,以便于大家查找和阅读,并

    2022年8月3日
    5
  • 手机的屏幕分辨率_手机屏幕分辨率尺寸

    手机的屏幕分辨率_手机屏幕分辨率尺寸  什么是分辨率?说白了,分辫率高,屏幕显示就更清晰、更细腻。分辨率不高,屏幕显示就会有颗粒感,粗糙感。一句话:分辨率是屏幕显示清晰度的一个指标。现在手机常用的分辫率有:128*160、176*220、240*320。128*160多用在低档的手机。中档的手机一般分辨率为176*220。中高档手机分辨率多为:240*320。夏普现在有一款手机分辨率达到了480*640。比电脑显示屏还清晰

    2022年8月13日
    11
  • 局域网服务器传输大文件方案,局域网快速传输大文件【操作方案】

    局域网服务器传输大文件方案,局域网快速传输大文件【操作方案】很多小伙伴都遇到过局域网快速传输大文件的困惑吧,一些朋友看过网上零散的局域网快速传输大文件的处理方法,并没有完完全全明白局域网快速传输大文件是如何解决的,今天小编准备了简单的解决办法,只需要按照1:首先需要传递文件的两台电脑之间都需要下载安装一个工具软件飞秋(feiQ),其是一款局域网聊天传送文件的即时通讯软件,如下图所示:2:两台电脑之间通过一根网线连接在一起(通过网线水晶头插入网孔的方式),如…

    2022年5月5日
    154
  • pycharm-professional-2021.12.13激活【2021.10最新】

    (pycharm-professional-2021.12.13激活)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html23EQQJJI0G-eyJsaWN…

    2022年3月30日
    55

发表回复

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

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