Vue-Cli

Question

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

|- base_shared
   |- controls
      |- .js files
   |- libs
      |- .js files
|- Project A (created with Vue-Cli)
|- Project B (created with Vue-Cli)

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

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

My question is:
How can I load files that are out of the <%= BASE_URL %> (in this case, files from base_shared) in the index.html of each project? All those files need to be globally accessible in all parts/views/components of the project during runtime.

我尝试了很多方法，例如：
src="../base_shared/controls..."
src="<%= BASE_URL %>../base_shared/controls...
但显然它不会工作，因为它超出了 root/host 范围（我们现在假设主机是 http://localhost:8081/）我还在 vue.config.js 中使用带有 resolve.alias 的 webpack 作为 '@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>

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

Vue-Cli - How to load external files (out of root) in index.html

javascript

node.js

vue.js