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


相关推荐

  • java以及IT中容器的概念

    java以及IT中容器的概念

    2021年7月19日
    54
  • 返回跳转指定页面的JS代码_页面跳转

    返回跳转指定页面的JS代码_页面跳转JS跳转页面参考代码第一种:    window.location.href=”login.jsp?backurl=”+window.location.href;第二种:    alert(“返回”);window.history.back(-1);   第三种:   window.navigate(“top.jsp”);  

    2022年8月13日
    1
  • Linux修改用户名和用户组

    Linux修改用户名和用户组最近安装了RedHatEnterpriseLinux5,以作学习之用。因为安装的时候随手创建了一个用户,后来却不太满意,需要修改下用户名。摸了许久才搞定并且理解,记录如下:总体来说,修改用户名和所在组,经过了一下步骤:1.修改用户名称2.修改用户所在主要组名称3.修改用户主目录名称4.修改新用户主目录指向上述步骤,经过图形界面修改和命令修改两

    2022年9月15日
    0
  • 什么是债券久期[通俗易懂]

    什么是债券久期[通俗易懂]在做债券的投资分析中经常出现的一个词汇——债券久期,之前更多地是专注于开发,并不明白数字背后的业务含义,今天特意梳理下并做个记录。百度百科的解释:久期也称持续期,是1938年由F.R.Macaula

    2022年8月3日
    3
  • 红外传感器型号和参数_红外传感器参数

    红外传感器型号和参数_红外传感器参数1、组成:红外线传感器包括光学系统、检测元件和转换电路。2、分类:光学系统按结构不同可分为透射式和反射式两类。检测元件按工作原理可分为热敏检测元件和光电检测元件。热敏元件应用最多的是热敏电阻。热敏电阻受到红外线辐射时温度升高,电阻发生变化,通过转换电路变成电信号输出。光电检测元件常用的是光敏元件,通常由硫化铅、硒化铅、砷化铟、砷化锑、碲镉汞三元合金、锗及硅掺杂等材料制成。(1)红外线传感器依动作可…

    2022年5月25日
    52
  • java检验数组重复_java – 如何遍历数组并检查重复项?「建议收藏」

    java检验数组重复_java – 如何遍历数组并检查重复项?「建议收藏」您可以使用嵌套循环遍历数组以查看新输入是否存在.在函数中执行此操作会更好.此外,在执行此操作时,您需要确保您不在第一个元素,否则您将获得空指针异常.for(inti=0;i<=stringArray.length;i++){booleanisInArray=false;System.out.println(“\nEnterastring”);Stringinpu…

    2022年9月15日
    0

发表回复

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

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