记录 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常被问到的问题(持续更新中)

    面试JAVA常被问到的问题(持续更新中)引言有的面试会被问到有没有写博客,这时候我尴尬,不知道怎么回答,所以这篇文章仅仅是把我面试JAVA的遇到的问题记录下来而已,也算是我写博客迈出的第一步,起码,以后被问到:有没有写博客?我可以回答,我写过。 (最主要的是以后换工作我不用频繁百度常见面试题了。。。。)ps1,别把我太当回事,我是个LJ;2,说得不对的地方请多多包涵,想看更详细的请百度官方文档和其他大佬的文章;3,如果有被问到…

    2022年7月9日
    19
  • SpringBoot 自动配置原理(超级无敌详细)-1[通俗易懂]

    SpringBoot 自动配置原理(超级无敌详细)-1[通俗易懂]我们用Springboot很方便的能将一个框架给搭建起来,是因为它将以前我们需要手动配置的地方都利用自动配置来代替,利用约定大于配置的思想简化了我们开发工作量

    2022年8月20日
    3
  • html怎么让背景图片自适应屏幕大小_css背景图片拉伸填充

    html怎么让背景图片自适应屏幕大小_css背景图片拉伸填充html如何让背景图片充满全图,就是拉伸html语言背景图片拉伸代码:background-size:cover,可以使图片拉伸铺满背景。拓展资料背景(background)属性定义元素的背景效果元素的背景区包括前景之下直到边框边界的所有空间。因此,内容框与内边距都是元素背景的一部分。取值:repeat、no-repeat、repeat-x、repeat-y。repeat:默…

    2022年10月5日
    0
  • 创意的课程设计——憨憨钟设计(碾压)

    创意的课程设计——憨憨钟设计(碾压)目录写在前面的话设计的实际演示憨憨钟的主要功能设计的实现过程界面设计模型结构设计元件清单调试异常分析结语写在前面的话大家好,学习之余给大家分享一个这学期设计的课程设计,互相学习借鉴。课程设计,尤其是自定义的课程设计,自盘古开天地以来就困扰着每一位工科男。我,一枚工科男,觉得需要站出来为大家排忧解难了。这学期有自定义的课程设计,所以我就设计了一个很有创意的课程设计,是一个国外开源的设计,结合了国外开源资料和一些大佬的实践经验。设计的实际演示憨憨钟自动写时间的效果:憨憨钟的演示效果1憨憨钟自动画天气

    2022年5月20日
    34
  • 微软Office与金山WPS Office有何私密关系?「建议收藏」

    微软Office与金山WPS Office有何私密关系?

    2022年2月2日
    64
  • yuv444 yuv420_硬盘转速和缓存哪个重要

    yuv444 yuv420_硬盘转速和缓存哪个重要YUV420与YUV444互转,YUV420与YUV444读取和保存,YUV的显示和播放功能【尊重原创,转载请注明出处】:https://blog.csdn.net/guyuealian/article/details/82454945  OpenCV提供了RGB与YUV420/YUV444互转的接口:cvtColor(),但根尴尬OpenCV就是没有提供YUV444与YUV420互转…

    2022年10月27日
    0

发表回复

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

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