记录 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, 
        ……
        ……

    }
}

 

 

 

 

 

 

 

 

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 怎样使用父组件向子组件传值【 必看】

    怎样使用父组件向子组件传值【 必看】呃呃,首先小仙女初学Vue传值的时候,是费尽了脑汁,不知道怎么回事。终于,功夫不负有心人,把他弄明白了,如有错误,请多指教!!首先在学习Vue的框架开发的项目过程中,会经常会用到组件来管理不同的功能,有些公共的东西会就会被抽取出来,当做组件去使用。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?就先和小编一起探究一下吧!父向子传递…

  • css漂浮广告代码_html浮动窗口怎么做

    css漂浮广告代码_html浮动窗口怎么做1.html部分复制代码代码如下:blog_floatdiv.html我是浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div…

  • linux命令行与shell脚本编程大全和鸟哥的私房菜_linux进入命令行

    linux命令行与shell脚本编程大全和鸟哥的私房菜_linux进入命令行一、基本bashshell命令创建文件:touch链接文件:符号链接:是一个实实在在的文件,两个通过符号链接在一起的文件,彼此的内容并不相同。使用ln-s命令。硬链接:会创建独立的虚拟文件,其中包含了原始文件的信息及位置。但他们从根本上而言是同一个文件。原始文件必须事先存在,使用ln命令。查看文件类型:file查看整个文件:cat,more,less…

  • 隐式转换函数_隐函数可以转化为显函数

    隐式转换函数_隐函数可以转化为显函数隐式转换函数是以implicit关键字声明的带有单个参数的函数。这种函数将会自动应用,将值从一种类型转换为另一种类型objectDemo1Main{defmain(args:Array[String]):Unit={valnum:Int=f1(3.5);valnum1:Int=3.5;print(num)}implic…

  • extjs中的flex_Extjs 教程「建议收藏」

    extjs中的flex_Extjs 教程「建议收藏」基本介绍ExtJS代表扩展JavaScript,是基于YUI(Yahoo用户界面)的sencha的JavaScript框架和产品。它基本上是一个具有现代UI的桌面应用程序开发平台。本教程完全理解ExtJS。这个参考将带你通过简单和实用的方法,同时学习ExtJS。适用人群本教程为初学者准备,帮助他们了解ExtJS的概念,以构建动态WebUI。学习前提对于本教程,读者应该具有HTML,CSS…

  • jmeter并发不同请求_jmeter3000个并发怎么测

    jmeter并发不同请求_jmeter3000个并发怎么测Jmeter压力测试工具直接上图查询重复数据如下:selectcount(order_id),order_id,report_typefromt_mapping_order_reportgroupbyorder_id,report_typehavingcount(order_id)>1解决方案:在两个列上添加唯…

发表回复

您的电子邮箱地址不会被公开。

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