VUE-CLI4.5 + 项目打包后生成可修改的配置文件

一、创建免打包配置文件文件

cli4+在public文件夹下面新建一个config.js配置文件，cli4版本以下则在static文件夹下新建即可

//其他配置文件调用
const urlConfig = {
    ip: "localhost", //前端IP地址
    port: 3000, //前端地址端口号
    baseURL: 'http://localhost:3000', //前端地址，端口号和上面保持一致
    webApiURL: 'http://localhost:7501', //访问的后端接口地址
    authorityURL: "http://localhost:7502", //Oauth单点登录地址
    version: 'V1.0', // 首页底部版本号、
    reloadTime: '10000' //  页面数据重载 (毫秒)
}

//vue.config.js调用
module.exports = urlConfig

二、在vue.config.js中引入

const urlConfig = require('./public/config');
const port = urlConfig.port; //前端地址端口号
const webApiURL = urlConfig.webApiURL; //访问的后端接口地址

module.exports = {
  // 部署应用时的基本url
  publicPath:"./", //静态资源路径（默认/，打包后会白屏）
  // 打包构建应用的文件夹
  outputDir:"dist", // 输出文件目录
  // 打包时存放静态资源的文件夹，js/img/css
  assetsDir:"static", //静态资源文件名称
  lintOnSave: false, //是否开启eslint
  productionSourceMap: false, //去除打包后js的map文件
  // 指定生成的index文件
  indexPath:"index.html",

  // 配置请求代理
  devServer:{
    open: false, // 自动启动浏览器
    host: '0.0.0.0', // localhost
    port: port, // 端口号
    hotOnly: false, // 热更新
    overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy:{
      "/api":{
        target: webApiURL, 
        ws: false, //代理websockets
        changeOrigin:true // 是否允许跨域
      }
    }
  }
}

三、在public目录下的index.html中引入配置文件

<script src="config.js" charset="utf-8"></script>

配置后，项目下的其他页面可以直接引用

四、在其他配置文件中引入配置的具体值

const authority = urlConfig.authorityURL; //前端地址端口号

const baseURL = urlConfig.baseURL; //前端地址，端口号和上面保持一致

说明：urlConfig为config.js中定义的值urlConfig。

参照网站：配置vue-cli工程在打包后可更改请求的url_Omndzzz的博客-CSDN博客

https://blog.csdn.net/sumimg/article/details/122624897?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-122624897-blog-110520396.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-122624897-blog-110520396.pc_relevant_default&utm_relevant_index=5