vue项目打包后，想再次修改配置文件的方法

有时，vue项目开发过程中，需要在打包后，再次修改项目的配置的文件预览地址等，如何实现

将项目文件命名为myPro

1.在项目根目录myPro下增加增加static文件夹，里面创建config.js即myPro/static/config.js

(function() {
  window.globalConfig = {
    // 主体信息图片预览地址
    viewImg:'https://deve.gcycl.cn/gpp/api/v1/files/view',
  }
})()

2.在myPro/config/index.js下面配置

1. const assetsPublicPath = 'myPro' //该处是你项目的文件夹名称-
//或者在myPro/config/project.conf下，定义变量PROJECT_NAME，然后在myPro/config/index.js引用该变量
//myPro/config/project.conf的内容
2.module.exports = {
  PROJECT_NAME: 'myPro',
}
//myPro/config/project.conf下引入变量
2.const projectConf = require('./project.conf')
2.const assetsPublicPath = `/${projectConf.PROJECT_NAME}/` 
//1月2选择一种方法实现即可，如果项目多次用到PROJECT_NAME，就用2

module.exports = {
  build: {
    assetsSubDirectory: 'static',
    assetsPublicPath: assetsPublicPath,//
  },
}

3.在build/webpack.pro.conf.js增加配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      templateParameters: {
        // 为config.js 提供时间戳
        TIMESTAMP: new Date().getTime(),
      },
    }),

4.在项目根目录下的index.html文件下引入配置

<script src="<%= htmlWebpackPlugin.options.path %>
/config.js?t=<%= htmlWebpackPlugin.options.templateParameters.TIMESTAMP %>">
</script>

5.在需要使用的地方

<el-image :src="viewImg + item.picturePath"></el-image>
<script>
export default {
    name: 'list',
    data() {
        return {
            viewImg:globalConfig.viewImg,
        }
    },
}
</script>