vue.js - 指定导入的根路径？

Question

我正在将我正在进行的 Vue.js 应用程序转换为使用 vue-cli/Webpack 和导入的模块我现在发现相当乏味的事情是准确地指定导入的相对路径。例如。 从'../../bus'导入总线，从'../Cell'导入Cell。容易出错。

我假设指定基目录或根目录并从中指定绝对路径必须足够简单，但我看不出在哪里可以这样做。例如，在标准的 vue-cli webpack 设置中，我正在处理的代码都在“src”目录中，其中我有“components”、“mixins”等。如果我可以使用它会很方便从'components/xxx'导入xxx，从'components/a/yyy'导入yyy。我该怎么做？

Answer 1

使用 vue-cli，您将 webpack 设置放在 vue-config.js 中，与 package.json 位于同一文件夹中。

vue-config.js:

var path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        src: path.resolve(__dirname, 'src')
      }
    },
  }
}

这将允许你做

import HelloWorld from 'src/components/HelloWorld.vue'

代替

import HelloWorld from '../components/HelloWorld.vue'

参见 https://cli.vuejs.org/config/#vue-config-js了解更多信息。