记录 vue-cli3 配置uat环境遇到的打包问题

最新推荐文章于 2024-05-28 16:22:32 发布

原创最新推荐文章于 2024-05-28 16:22:32 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack #vue cli #打包

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue项目中配置UAT环境，包括修改package.json以支持不同环境的构建，以及通过设置.env.uat文件来指定正确的API地址和版本号。特别关注了在生产模式下正确打包CSS和JS资源的问题解决方法。

今天给前端页面配置一个新的可供切换的环境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, 
        ……
        ……

    }
}