项目构建配置

注意：该文档基于 @vue/cli 3.x 版本

设置目录别名 alias

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  // 别名 alias
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
}

代理配置

请求 /api/users 现在会被代理到请求 http://192.168.0.1:8080/users 。

注意 api 已经被 pathRewrite 替换。

devServer.proxy | webpack

module.exports = {
  // 代理设置
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.1:8080/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

环境配置

新建 .env.development 、.env.test、.env.production 文件。

Vue CLI 启动时会将 .env 文件中的配置注入到环境变量中，除了 NODEENV、 BASE_URL，其余变量需以 VUE_APP 开头。

环境变量和模式 | Vue CLI

// .env.development
NODE_ENV = 'development'
BASE_URL = '/'
VUE_APP_NAME = 'vue-quick-build'
VUE_APP_FETCH_URL = 'http://192.168.0.1/
VUE_APP_PUBLIC_KEY = 'VUE_APP_PUBLIC_KEY'
// .env.test
NODE_ENV = 'test'
BASE_URL = '/'
VUE_APP_NAME = 'vue-quick-build'
VUE_APP_FETCH_URL = 'https://test.com/'
VUE_APP_PUBLIC_KEY = 'VUE_APP_PUBLIC_KEY'
// .env.production
NODE_ENV = 'production'
BASE_URL = '/'
VUE_APP_NAME = 'vue-quick-build'
VUE_APP_FETCH_URL = 'https://production.com/'
VUE_APP_PUBLIC_KEY = 'VUE_APP_PUBLIC_KEY'

在 package.json 脚本中加入快捷命令：

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "dev-build": "vue-cli-service build --mode development",
    "test-build": "vue-cli-service build --mode test",
    "build": "vue-cli-service build"
  }
}

use pug

Pug 是一款健壮、灵活、功能丰富的模板引擎，由 Jade 改名而来。

添加一个新的 Loader | Vue CLI

安装 pug loader

yarn add pug pug-plain-loader -D
// or
npm install pug pug-plain-loader -D

module.exports = {
  // use pug
  chainWebpack: config => {
    config.module
      .rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
      .loader('pug-plain-loader')
      .end()
  }
}

多页面

在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。

multi-page | Vue CLI

配置

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

目录结构

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── axios
│   │   └── index.js
│   ├── components
│   │   └── HelloWorld.vue
│   ├── index
│   │   ├── App.vue
│   │   ├── main.js
│   │   ├── router.js
│   │   └── views
│   │       ├── About.vue
│   │       └── Home.vue
│   ├── mixins
│   │   └── tableMixin.js
│   ├── store.js
│   ├── style
│   │   ├── element-variables.scss
│   │   └── index.scss
│   ├── subpage
│   │   ├── App.vue
│   │   ├── main.js
│   │   ├── router.js
│   │   └── views
│   │       ├── About.vue
│   │       └── Home.vue
│   └── util
│       └── encrypt.js
├── vue.config.js
└── yarn.lock