env的配置问题

做项目的时候遇到了这个问题，所以写一篇博客记录一下
开始的时候是直接将公共路径像开发的时候的地址和图片路径都写在Global.vue组件里面的，这么写确实没什么问题，只不过在npm run build的时候需要修改一些配置，会造成一些不必要的麻烦

<script>
	var BASE_URL = {
    //开发环境打开
    /* "user": "/backend", */
    //预发布环境打开
    "user": '',
    //公用的图片路径
    "image_url": ""
  }

	export default { //将常量输出出去
		BASE_URL,
	}
</script>

然后在打包的时候需要将一个注释掉放到服务器才能请求到数据，不然会发现请求路径错误，每次都需要手动修改，无疑是很麻烦的，有时候忘记了，还会增加工作量，所以可以配置一个.env文件，向下面这样写三个文件，都放在文件的根目录下

在.env文件中其实应该可以不写任何内容（因为我不写确实也可以运行），还有这几个文件的内容有限制，一般都是以VUE_APP开头，我没太过了解，如果有需要可以去看大佬的博客，我这个只是最简单的配置，然后能跑项目的

.env的配置

//可以放一个不区分环境的默认连接，也可以不写
VUE_APP_URL=''

.env.development的配置

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
VUE_APP_BASE_API ='/backend'

NODE_ENV就是说明这个是什么环境，然后BUE_APP_TITLE在确认这个环境的名字，不写也没事，写的话最好和文件的后缀一样，然后就写开发环境的路径，因为我在vue.config.js里面配置了反向代理，所以只写/backend就可以了

.env.production的配置

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
VUE_APP_BASE_API = ''

然后就基本配置完了，因为在npm run serve的时候默认是development的环境，npm run build会变成production的环境，不用配置其他了，如果还要加多，就可以在package.json文件里面配置一些东西，比如我的只有两个环境，然后我就在package.json里面修改了一下

"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "deve": "vue-cli-service serve --mode development",
   "prod": "vue-cli-service build --mode production"
 },

这个配置注意的问题就是–mode后面的单词就是.env后面的单词，然后用npm run deve就去找.env,developement这个文件，然后实行的效果和npm run serve是一样的，另一个也同理，然后就算配置再多的环境也不会出问题了，也不用频繁的修改去浪费时间