Vue-Cli - 如何在 index.html 中加载外部文件（从根目录中）

Question

首先，我有一个这样的文件夹结构（并且不能修改）：

|- base_shared
|- 控制
|- .js 文件
|- 库
|- .js 文件
|-项目 A （使用 Vue-Cli 创建）
|-项目 B （使用 Vue-Cli 创建）

在base_shared文件夹中，我们存储了需要与所有项目共享的所有文件，它包括库、UI 控件等......这些大多数是.js文件，没有任何类型的export default或类似文件，因为它们是 simple.js。 这些文件经常被修改，并且经常在base_shared中添加所有项目都可以使用的新文件。

文件夹Project A/B是 Vue-Cli 创建的项目，具有自己的 vue.config.js、路由和.vue组件。 在每个项目中，我们都有一个public/index.html文件。 在这里，我们加载了大部分库，.css 和 .js 文件。 （不使用import() ，但在头部使用<script src=...> ）

我的问题是：
如何在每个项目的 index.html 中加载 <%= BASE_URL %> 之外的文件（在这种情况下，来自base_shared的文件）？ 所有这些文件都需要在运行时在项目的所有部分/视图/组件中全局访问。

我尝试了很多事情，例如：
src="../base_shared/controls..."
src="<%= BASE_URL %>../base_shared/controls...
但显然它不会工作，因为它不在根/主机 scope （让我们现在假设主机是 http://localhost:8081/）我也在 vue.config.js 中使用resolve.alias为'@base': path.resolve(__dirname, '../base_shared')

我习惯了 IIS 服务器，在那里我可以创建一个“虚拟目录”来指向base_shared ，然后在我的项目中使用它，就像文件夹在项目根目录中一样（如果不是，它是虚拟的）

在 Vue/Node 中有类似的东西吗？ 我可以配置虚拟路径吗？ 还是我需要重新考虑这个想法？

Answer 1

您是否尝试将其设置到您的 vue.config.js 中？

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('libs', path.resolve(__dirname, '../base_shared/'))
    }
}

他们使用import.... from....到您的脚本块中。

<script>
   import { packagename } from "packagefolder/package.js"
   import 'packagefolder/css/package.css'

   export default {
       ...       
   }
</script>