将 /public 中的 JS 文件导入 /src 中的 JS 文件答案

【问题标题】：Import JS file placed in /public into JS file in /src将 /public 中的 JS 文件导入 /src 中的 JS 文件
【发布时间】：2019-12-19 06:13:40
【问题描述】：

我目前正致力于在我的 Vue 应用中实现 OAuth 身份验证。

身份验证逻辑由两个文件组成，src/auth.js 和 public/silent-renewal.html。第一个文件包含与 OAuth 服务器交互的所有逻辑。第二个文件用于在后台更新访问令牌时处理回调。

除了这两个文件之外，还有文件public/oidc-settings.js。此文件包含定义 OAuth 服务器设置的 JSON 变量。它定义了一个带有设置的 JSON 变量以及访问它们的方法：

const settings = {
  authority: 'http://localhost:8180/auth/realms/auth-example',
  client_id: 'webclient-service',
  redirect_uri: 'http://localhost:8080/callback',
  response_type: 'code',
  response_mode: 'query',
  scope: 'openid profile',
  post_logout_redirect_uri: 'http://localhost:8080/logout',
  silent_redirect_uri: 'http://localhost:8080/silent-renewal.html',
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: true
}

function getSettings () {
  return settings
}

在silent-renewal.html 文件中，我通过使用script 标记(<script src='oidc-settings.js'></script) 导入设置来访问设置。

问题是我不知道如何从我的auth.js 访问oidc-settings.js。目前我在auth.js 文件中再次定义了完全相同的设置。

如何将放置在我的应用程序的public 文件夹中的 Javascript 文件导入到 src 文件夹中的 Javascript 文件中？

【问题讨论】：

项目是用vue-cli创建的吗？它应该只是从'../public/../../'中导入“whatever”

标签： javascript vue.js import vuejs2

【解决方案1】：

如果您询问如何导航到不同的文件夹，您可以使用../ 向上导航文件夹。

看起来像这样：'../public/your-file.js'

如果您需要向上导航两个（或更多），只需为每个级别添加另一个../，就像这样'../../folder/file.js'

【讨论】：

【解决方案2】：

您正在尝试导入未设置为导入的内容，可能您的路径是正确的，但您需要使返回配置的函数可以导入。

只需更改设置文件，即可导入函数 getSetting

export const getSettings = () => {
  return settings
}

然后在你的“src”文件中

 import { getSettings } from '../public/../../'

【讨论】：

我试过这个。但是当我将export 添加到getSettings 时，silent-renewal.html（我也使用oidc-settings.js）在我打开它时会引发错误：Uncaught SyntaxError: Unexpected token export。
@rule 在'../public/../../' 之前我还没有看到这个特定的变化。这将如何工作？它是否将一个文件夹升入公共文件夹，然后再升入另外两个文件夹？这里有点困惑。