项目配置文件
【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
运行效果如下,项目能正常跑起来:
配置中,除了走不同的端口外,开发环境和生产环境跑出来的程序效果一样。