怎样设置vue-cli 3中vue.config.js的途径别号？

前段时间更新电脑重装了一下vue-cli，发明了vue-cli已更新到3.0版。用来搭建项目后发明简化了许多，而且设置文件如今能够悉数统一在vue.config.js中，很轻易有无，从此以后一个设置文件走遍公司大小项目，妈妈再也不必忧郁我每次新建项目时重新设置各个庞杂的选项了。那末怎样在vue.config.js中设置途径别号呢？

1. 建立项目

2. 在根目录下新建 vue.config.js

3. 修正vue.config.js

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },
}

之所以用'@/assets'，是因为偷了个懒应用3.x中/node_modules/@vue/cli-service/lib/config/base.js中已配好的@途径,有兴致的能够进入文件内里看一看

···
    webpackConfig.resolve
      .set('symlinks', false)
      .extensions
        .merge(['.js', '.jsx', '.vue', '.json'])
        .end()
      .modules
        .add('node_modules')
        .add(api.resolve('node_modules'))
        .add(resolveLocal('node_modules'))
        .end()
      .alias
        .set('@', api.resolve('src'))
        .set(
          'vue$',
          options.runtimeCompiler
            ? 'vue/dist/vue.esm.js'
            : 'vue/dist/vue.runtime.esm.js'
        )
···

参考文档：

vue-cli3 webpack 相干简朴的设置体式格局

webpack resolve.alias