手把手教Vue+elementUI搭建后台管理系统（四）：自定义项目配置文件

项目配置文件

【vue-cli 配置文件官方地址：】
https://cli.vuejs.org/zh/config

具体配置本文就不详细赘述了，vue相关官网说明是我见过唯一一个比书本还好的官方说明；想了解详细配置的，可以直接访问vue-cli的配置文件学习下。我们只配置项目流程中使用到的。

项目配置文件使用

首先需要在 项目的根目录下 创建一个 vue.config.js。填写如下内容，使用 json 格式进行配置。配置文件各属性可以自行查阅官方文档。

修改默认端口号

项目默认 使用 8080 端口访问项目，当 8080 被占用时，会自动选择新的端口打开。可以自定义端口访问，如下定义端口为 9527。

module.exports = {
    devServer: {
        port: 9527
    }
}

选择性关闭ESLint

因为我们之前在装脚手架的时候是装上了ESLint包的，ESLint可以统一代码规范，没有按照一定的规则编写代码，会有报错的情况，用不习惯的人可以给配置关掉。配置如下：

模式和环境变量配置

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 “production”，在 test 模式下被设置为 “test”，默认则是 “development”。

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

例如通过将 NODE_ENV 设置为 “test”，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。

同理，NODE_ENV=development 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。

当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 “production” 来获取可用于部署的应用程序。

注意：

NODE_ENV
如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。

环境变量

我们可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

环境文件加载优先级
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

项目生产和开发环境配置

在当前项目的根目录下，创建 两个文件（.env.development、.env.production）。
其中：
　　.env.development 是开发环境会加载的文件，即 npm run serve 时，会加载 .env.development。
　　.env.production 是生产环境会加载的文件（打包后的文件），即 npm run build 时，会加载 .env.production。

接下来我们来测试下配置文件是否正确，我们分别配置下这两个文件，让开发环境和生产环境的程序运行起来看看效果。
给 .env.development 添加一个变量。命名规则： VUE_APP_ + 变量名 ：

VUE_APP_URL=http://localhost:9527

也给 .env.production 添加一个变量。

VUE_APP_URL=http://localhost:9090

我们运行npm run build来打包下项目，根目录下生成了dist目录。

打包完成后，我们需要使用服务器启动才能访问dist里面的程序，如下操作：
全局安装 serve：

  npm install -g serve

运行程序：

进入 dist 目录，输出 serve
或者 直接 serve -s dist路径，比如 serve -s E:\vue\front\dist

运行效果如下，项目能正常跑起来：

配置中，除了走不同的端口外，开发环境和生产环境跑出来的程序效果一样。