指定导入的根路径？

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'.我该怎么办？

Answer 1

我正在使用 laravel 和 laravel-mix 包。

为了使它工作，将它添加到你的 webpack.mix.js 中：

const path = require('path');

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

Answer 2

事实上,解决方案已经到位,但没有详细记录.在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(__dirname, '../src/mixins').所以我现在可以使用eg import Field from 'mixins/Field',以及eg import ScrollableTable from 'components/ScrollableTable'.

Answer 3

你可以使用这样的东西:

import { routes } from '@/router/routes'

其中,/router文件夹是我的项目的根,我可以在任何地方汇入我的路线:)

注意:我正在使用VueJS 2.0

Answer 4

使用vue-cli，您可以将webpack设置放在与package.json相同的文件夹中的vue-config.js中。

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。