指定导入的根路径？

Question

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

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

原文由 John Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 。

原文由 Damian Helme 发布，翻译遵循 CC BY-SA 4.0 许可协议