【vue-cli 3.0】 vue.config.js配置 - 路徑別名

如何配置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