Question

我正在将我正在进行的Vue.js应用程序转换为使用vue-cli / Webpack和导入的模块我现在发现的一些相当乏味的事情是准确地指定导入的相对路径。例如。 //MARK: - UIPageViewControllerDataSource func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? { guard let viewControllerIndex = orderedViewControllers.indexOf(viewController) else { return nil } let previousIndex = viewControllerIndex - 1 guard previousIndex >= 0 else { return nil } guard orderedViewControllers.count > previousIndex else { return nil } return orderedViewControllers[previousIndex] } func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? { guard let viewControllerIndex = orderedViewControllers.indexOf(viewController) else { return nil } let nextIndex = viewControllerIndex + 1 let orderedViewControllersCount = orderedViewControllers.count guard orderedViewControllersCount != nextIndex else { return nil } guard orderedViewControllersCount > nextIndex else { return nil } return orderedViewControllers[nextIndex] }，import bus from '../../bus'。容易犯错误。

我认为它必须足够直接指定一个基本目录或根目录，并从中指定绝对路径，但我看不出会那样做。例如，在标准的vue-cli webpack设置中，我正在处理的代码都在'src'目录中，其中我有'components'，'mixins'等。如果我可以使用它会很方便import Cell from '../Cell'，import xxx from 'components/xxx'。我该怎么做？

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

您可以使用以下内容：

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

其中/router文件夹位于我项目的根目录下，我可以在任何地方导入我的路线：）

注意：我正在使用VueJS 2.0

Answer 3

使用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。

Answer 4

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

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

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

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
    },
  }
}

指定导入的根路径？

7 个答案: