为导入指定根路径？

Question

我正在将正在运行的Vue.js应用程序转换为使用Vue cli/Webpack和导入的模块。目前，我发现有一件事相当乏味，那就是准确地指定导入的相对路径。例如，从“../bus”导入总线，从“../Cell”导入单元格。容易犯错误。

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

Answer 1

我使用laravel和laravel混合包。

要使其正常工作，请将此添加到webpack.mix.js：

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js')
    },
  },
});

Answer 2

使用vue cli，可以将网页包设置放在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。

Answer 3

事实上，解决方案已经到位，只是没有很好的文档记录。在webpack.base.conf.js中，有以下内容：

  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  }

我添加了自己的别名，“mixins”：path.resolve（\uu dirname，../src/mixins'）。因此，我现在可以使用例如从“mixins/Field”导入字段，以及从“components/ScrollableTable”导入ScrollableTable。