vue-cli3全面配置详解

简介

vue-cli3是vue官方提供的脚手架工具，它可以帮助我们快速搭建一个vue项目框架，包含项目中所需的各种配置项。本文将对vue-cli3的全面配置进行详细讲解，帮助初学者快速上手。

安装

若未安装node.js和npm，需先安装node.js和npm，安装方法可参照官网。

全局安装vue-cli3：

npm install -g @vue/cli

创建项目

使用vue-cli3创建一个项目：

vue create hello-world

其中hello-world为项目名称，创建后会自动在当前目录下创建一个名为hello-world的文件夹，其中包含初始化的vue项目。

配置

vue-cli3默认的配置文件为vue.config.js，如果创建项目时未生成，可以手动在项目根目录创建该文件。以下为常用的配置项：

publicPath

publicPath用于指定打包后的静态文件的部署路径，如果我们想指定打包后的文件部署在一个子目录下，可以设置该项。如下示例：

module.exports = {
  publicPath: '/my-project/'
}

assetsDir

assetsDir用于指定静态资源目录，默认值为assets。如果我们想将静态资源存放在一个子目录下，可以设置该项。如下示例：

module.exports = {
  assetsDir: 'static'
}

devServer

devServer用于配置开发服务器，常用的配置项有port（指定开发服务器的端口）、proxy（配置代理）等，如下示例：

module.exports = {
  devServer: {
    port: '8080',
    // 配置代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

chainWebpack

chainWebpack用于配置webpack链式操作，可以通过config.module.rule()方法添加loader，通过config.plugin()方法添加插件，如下示例：

module.exports = {
  chainWebpack: config => {
    // 添加loader
    config.module.rule('less')
      .test(/\.less$/)
      .use('less-loader')
        .loader('less-loader')
        .end()

    // 添加插件
    config.plugin('html')
      .tap(args => {
        args[0].title = 'My Title'
        return args
      })
  }
}

示例

示例一：部署到子路径下

在vue.config.js中设置publicPath为我们想部署的子路径即可，如下所示：

module.exports = {
  publicPath: '/subdir/'
}

示例二：配置sass

使用sass-loader和node-sass即可配置sass，如下所示：

npm install --save-dev sass-loader node-sass

在vue.config.js中添加以下代码：

module.exports = {
  chainWebpack: config => {
    // 添加sass-loader
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item.use('sass-loader')
        .loader('sass-loader')
        .tap(options => ({
          ...options,
          prependData: '@import "~@/variables.scss";'
        }))
        .end()
    })
  }
}