Vue.js 是否为导入指定根路径？

我正在将正在运行的Vue.js应用程序转换为使用Vue cli/Webpack和导入的模块。目前，我发现有一件事相当乏味，那就是准确地指定导入的相对路径。例如，

从“../bus”导入总线

，

从“../Cell”导入单元格

。容易犯错误

---

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

从“components/xxx”导入xxx

，

从“components/a/yyy”导入yyy

，这将非常方便。我该怎么做呢？

解决方案已经到位，事实上，只是没有很好的文档记录。在

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

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

其中

/router

文件夹位于我的项目根目录上，我可以在任何地方导入路由：）

---

注意：我正在使用VueJS 2.0在项目根目录下创建一个vue.config.js文件，该文件将包含

var path=require（'path'）；
module.exports={
配置网页包：{
决心：{
模块：[
路径解析（“./src”），
路径解析（“./节点\模块”）
]
},
}
}

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

---

有关更多信息，请参阅。

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

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

const path=require（'path'）；
mix.webpackConfig({
决心：{
别名：{
“@”：path.resolve（uu dirname，'resources/js'）
},
},
});

只需在导入路径中使用@symbol作为根。 例如，假设您在根目录下有一个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'

---

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

允许您导入：

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

---

我不确定你到底要怎么做，但看起来你需要在webpack conf和一些“解决”中这样做。实际上，似乎已经在webpack.base.conf.js文件中使用resolve.alias对此做出了规定。别名是为“components”和“src”定义的，这两个词似乎都很有效。很好。很高兴我给了你一个很好的答案。这并不是真正的答案，因为它不会神奇地起作用。请参见：要设置@resolverThis可以工作，但是单文件组件中的SCS如何呢？我将其添加到

webpack.config.js

文件中，供任何使用它的人使用。例如，您也可以直接为组件创建别名。请注意，在Vue的当前迭代中，此文件不是

Vue.config.js

vue config.js

此处建议：）如何使用资产实现此功能？。对于中的src，我认为这是最好的解决方案。

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