Question

我对在整个项目中引入组件以供其他文件使用的正确方法感到困惑。

我的vue js项目结构如下：

.
├── node_modules
├── public
│   └── favicon.svg
|   └── index.html
├── src
│   ├── views
│       └── Main_screen.vue
|   └── App.vue
|   └── main.js
|   └── routes.js
├── vue.config.js
├── package.json
├── package-lock.json

例如，在vue.config.js中，我有以下代码：

module.exports = {
    api_url: 'http://localhost'
 }

我有兴趣使用api_url作为全局变量，这样无论我在哪个文件中，我都可以引用它。在我的main.js中，我导入为：

import api_url from '../vue.config.js'
Vue.prototype.api_url = api_url

我可以在没有问题（import { api_url } from '../vue.config'的route.js中使用它，但是在Main_screen.vue中，使用相同的语句会导致导入错误。

如果您能参考一个好的资源来帮助我理解结构，我也将不胜感激。

Answer 1

../或仅..是当前目录上方目录的简写。因此，如果您在vue.config中使用了src文件夹，那么您将在Main_screen.vue文件夹中搜索src并在{{1} }。尝试在main.js中将其导入：

Main_screen.vue

另一方面，点import { api_url } from '../../vue.config'表示当前目录，这意味着如果您在.内导入类似import { api_url } from './vue.config'的内容，则会出现错误，因为您正在其中搜索文件main.js文件夹

修改

如 Lawrence Cherone 在评论中所述：

src可以在较大的项目中快速发生，最好是import { api_url } from '../../../../../../vue.config'。 import { api_url } from '~/vue.config'在~所在的地方。

导入组件vue js的正确方法

1 个答案: