Vue项目配置可修改配置项

正常开发情况下可能会遇到在不同环境下有一些配置项会不一样，但是又不能每次配置项不同都让开发人员在本地修改代码，再打包上传，这样做是可行的，但是太麻烦了。
所以可以设置一个globalConfig.js文件来统一管理这些配置项，然后再发版的时候直接让实施人员配置就可以。
vue-cli2：
1、再static文件夹下新建一个config.js文件

(function() {
  window.globalConfig = {
    BASE_URL: 'http://127.0.0.1:8000', // 可修改配置项
  }
})()

2、在webpack.dev.conf.js和webpack.pro.conf.js文件夹中设置以下内容

plugins: [
	new HtmlWebpackPlugin({
	      filename: 'index.html',
	      template: 'index.html',
		  temp: new Date().getTime(),
	      inject: true,
	      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory, // /static 开发环境路径
	     // path: config.build.assetsPublicPath + config.build.assetsSubDirectory, // /yi-ji-yuming/static 生产环境路径
    }),
 ]

3、在index.html中引入

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

4、在页面中使用

data() {
    return {
      baseurl: window.globalConfig.BASE_URL, // 全局可修改配置项
    };
  },

vue-cli3:
1、在public文件夹下新建config.js

const BaseConfig = {
  PROJECT_NAME: '项目名称'
}

2、在index.html中引入

<script src="./config.js"></script>

3、在页面中使用

data(){
	return(){
		projectname: BaseConfig.PROJECT_NAME  // 全局可修改配置项
	}
}