记录 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)


相关推荐

  • navicat 15的激活码【2022.01最新】2022.03.04

    (navicat 15的激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • opc服务器网站,OPC 服务器[通俗易懂]

    opc服务器网站,OPC 服务器[通俗易懂]OPC服务器OPC服务器,是指按照OPC基金组织规定的OPC规范群开发的软件驱动。OPC服务器作为中间媒介负责从数据源读取数据再跟另外一端的客户端通信。在OPC客户端/服务器的结构图中,通信的发起端是,也只能是OPC客户端。客户端和服务器的对话是双向的,也就是说,客户端既可以从服务器读出也可以向服务器写入。TOPC基金会定义了四种不同类型的OPC服务器。他们分别是:OPC数据访问服务器…

  • inputstreamwriter_computrace

    inputstreamwriter_computrace关于往文件存入数据所使用的编码和解析时编码产生的问题解码的格式和编码的格式一定要相同否则会出现乱码importjava.io.*;publicclassFuXi3{publicstaticvoidmain(String[]args)throwsIOException{demo01();demo02();}privatestaticvoiddemo02()thro.

  • aspectjweaver的作用[通俗易懂]

    aspectjweaver的作用[通俗易懂]aspectjweaver的作用欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown将代码片显示选择的

  • PhpStorm中terminal窗口字体修改

    PhpStorm中terminal窗口字体修改

    2021年10月30日
  • VB学习笔记(基础知识)(一)「建议收藏」

    VB学习笔记(基础知识)(一)「建议收藏」VisualBasic程序设计语言学习笔记(一)本学习笔记对应版本:VB6.0企业版(推荐使用企业版)对象及其操作对象是VisualBasic中的重要概念,现在介绍两种基本对象——窗体和控件。VisualBasic中,对象可以分为两类,即预定义对象和用户定义对象,其中,窗体和控件就是预定义对象。对象属性属性是对象的特征,不同的对象有不同的属性,而常见的属性有:1.Caption…

发表回复

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

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