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

fmain發表於2018-08-24
VueJS

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

相關文章