vue-cli 快速开始

1. 起步

安装：

npm install -g @vue/cli

vue -V
## @vue/cli 5.0.8

创建项目：

vue create my-project

2. 模式和环境

默认有三个模式(mode)：

• development
• production
• test

对应的 NPM Scripts：

# 对应的 mode 为 development, 使用 .env.development 文件
vue-cli-service serve      

# 对应的 mode 为 production, 使用 .env.production 文件
vue-cli-service build      

# 对应的 mode 为 test, 使用 .env.test 文件
vue-cli-service test:unit  

环境变量文件（项目根目录）：

.evn                      # 所有模式都会使用

.env.development          # --mode development
.env.production           # --mode production
.env.test                 # --mode test

.env.sit1                 # --mode sit1
.env.inner.sit1           # --mode inner.sit1

定义环境变量：

• .env.development

  API_BASE_PATH=http://127.0.0.1:8080/api
  

• .env.production

  API_BASE_PATH=http://www.abc.com/api
  

使用环境变量：

• 通过 process.env.环境变量名称 的方式使用

注意：

• 非 VUE_APP_ 打头的环境变量, 只能用在构建脚本中

• VUE_APP_ 打头的环境变量，可以用在业务代码中

• NODE_ENV 由 vue-cli 自动赋值的

  • 执行 vue-cli-service serve 时, NODE_ENV 为 'development'
  • 执行 vue-cli-service build 时, NODE_ENV 为 'production'
  • 如果指定了 --mode, 需要使用 cross-env 指定 NODE_ENV 的值

• BASE_URL 的值为 vue.config.js 中的 publicPath

3. 配置 webpack

vue.config.js:

module.exports = {
  // 最终会合并到 webpack 配置对象
  configureWebpack: {

    // webpack config

    plugins: [ /* ... */ ]
  }
}

4. 参考

• Vue CLI 官方文档 (opens new window)