时间戳

首页 > 解决方案 > 导入组件vue js的正确方法

vue.js - 导入组件vue js的正确方法

问题描述

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

我的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

我可以在 routes.js 中毫无问题地使用它（import { api_url } from '../vue.config'），但在 Main_screen.vue 中，使用相同的语句会出现导入错误。

如果您可以参考一个很好的资源来帮助我理解结构，我也会很感激。

标签： vue.jsvuejs2

解决方案

../或者只是..当前目录上方目录的简写。因此，如果您vue.config在src文件夹中使用它，则在文件夹中Main_screen.vue搜索，并src在main.js. 尝试像这样导入它Main_screen.vue：

import { api_url } from '../../vue.config'

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

编辑

正如Lawrence Cherone在评论中所说：

import { api_url } from '../../../../../../vue.config'在较大的项目中可以很快发生，最好这样做import { api_url } from '~/vue.config'。~在哪里package.json。

推荐阅读