指定导入的根路径？

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

实际上，解决方案已经到位，只是没有充分记录。在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')。所以我现在可以使用例如import Field from 'mixins/Field'，以及例如import ScrollableTable from 'components/ScrollableTable'.

Answer 2

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

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

const path = require('path');

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

Answer 3

使用 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 了解更多信息。

Answer 4

你可以这样使用：

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

/router 文件夹在我的项目的根目录中，我可以在任何地方导入我的路线 :)

注意：我使用的是 VueJS 2.0

Answer 5

在项目根目录创建一个 vue.config.js 文件，该文件将包含

var path = require('path');
module.exports = {
	configureWebpack : {
		resolve: {
	        modules : [
		        path.resolve("./src"),
	            path.resolve("./node_modules")
	        ]
	    },
	}
}

Answer 6

只需在导入路径中使用 @ 符号作为根。 例如，假设您在根目录下有一个 firebase 文件夹和一个 firebaseConfig.js 像这样的文件

// Your web app's Firebase configuration

var firebaseConfig = {
  apiKey: "...somekey...",
  authDomain: "...someApp....firebaseapp.com",
  databaseURL: "https://...someApp....firebaseio.com",
  projectId: "...someProjId...",
  storageBucket: "",
  ...bla bla bla...  
};
export default firebaseConfig;

在 firebase 文件夹中。

您可以使用以下说明在任何地方导入配置文件：

import firebaseConfig from '@/firebase/firebaseConfig'

Answer 7

迟到的答案：为 src 中的所有文件夹创建别名。使用 Damian Helme 解决方案。所有功劳都应该归他所有。

允许您导入：

import HelloWorld from 'components/HelloWorld.vue'

发件人：

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

在项目的根文件夹中创建 vue.config.js。注意：新建文件夹时不会自动更新，需要手动重启。

const path = require('path');
const fs = require('fs');
//Find all files in src and make alias

const dirs  = fs.readdirSync(path.resolve(__dirname, 'src'));

const alias = {
  src: path.resolve(__dirname, 'src')
}

dirs.forEach(name => {
  const filePath = path.resolve(__dirname, 'src', name);
  //Only add folders
  if (fs.statSync(filePath).isDirectory()) {
      alias[name] = filePath;
  }
  
});

module.exports = {
  configureWebpack: {
    resolve: {
      alias
    },
  }
}