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


相关推荐

  • Linux下如何解压rar文件「建议收藏」

    Linux下如何解压rar文件「建议收藏」在windows下我们压缩解压文件通常后缀为rar,在linux下我们压缩解压文件通常后缀为tar默认在linux下我们不能解压压缩rar文件,那我们如何使用呢?我们可以下载rarlinux安装包

    2022年6月30日
    21
  • springcloud eureka原理和机制_eureka配置详解

    springcloud eureka原理和机制_eureka配置详解SpringCloudEureka原理分析1简介在微服务架构下,服务端环境通常包含多个服务,同时每个服务也是一个无状态的多实例集群。这些服务和实例一般都是会动态变化的,可能会因为意外的故障或者人为的重启发版等原因,这些服务和实例的信息和数量随时会发生改变。因此微服务环境下需要一个服务注册中心来集中管理集群中各个服务实例的状态,这样服务的调用方就可以动态地从服务注册中心获取到当前可用的服务实例来发起调用。Eureka就是服务发现中心的一种。Eureka一开始是由Netflix开源的用于服

    2022年10月19日
    6
  • FileStream类

    FileStream类FileStream类的官方介绍请见:https://msdn.microsoft.com/zh-cn/library/system.io.filestream.aspx一、使用FileStream来读取文本文件stringpath=@”E:\TEMP\TestFileStream\theoldiPhone6.txt”;

    2022年7月12日
    22
  • microsoft visual studio最新版本_visual studio 2019下载安装教程

    microsoft visual studio最新版本_visual studio 2019下载安装教程微软已经向MSDN订阅用户提供了VisualStudio2013正式版镜像下载,不过非MSDN用户可以在微软的VisualStudio2013官方网站上下载到正式版镜像(通过下载专业版本,已验证与MSDN版本一致)。下面为大家整理一下个版本下载地址。MicrosoftVisualStudioUltimate2013(简体中文旗舰版)文件名: cn_visual_st

    2025年8月28日
    5
  • mysql数据库cap理论_CAP理论总结

    mysql数据库cap理论_CAP理论总结C代表Consistency,一致性,是指所有节点在同一时刻的数据是相同的,即更新操作执行结束并响应用户完成后,所有节点存储的数据会保持相同。A代表Availability,可用性,是指系统提供的服务一直处于可用状态,对于用户的请求可即时响应。P代表PartitionTolerance,分区容错性,是指在分布式系统遇到网络分区的情况下,仍然可以响应用户的请求。网络分区是指因为网…

    2022年6月15日
    88
  • Flash Alternativa 3D引擎-基础理论

    Flash Alternativa 3D引擎-基础理论

    2021年8月25日
    77

发表回复

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

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