2

我有一个遗留项目，想开始使用 CDN 使用 Vue.js 单文件组件。我确实碰到了一些插件，例如https://github.com/FranckFreiburger/vue3-sfc-loader。从 CDN 的角度来看，我们是否有任何解决方案可以：

  • 通用挂载到页面/正文的根目录？
  • 从 /components 文件夹中添加每个 *.vue 文件？

然后我们可以在现有页面的任何位置调用这些组件。我相信插件https://github.com/FranckFreiburger/vue3-sfc-loader只允许我们挂载到特定的 div#app 并添加自定义模板（至少按照提供的示例）干杯！

4

1 回答 1

1

在这个调查中花了很多时间之后，我选择了Vue Web Components 方法

将所有组件添加到 /components 文件夹，我们只需要像下面这样的 package.json

  "scripts": {
    "build": "node_modules/.bin/vue-cli-service build --target wc '/components/*.vue' --name my-app",
    "watch": "node_modules/.bin/vue-cli-service build --watch --target wc '/components/*.vue' --name my-app"
  },
  "dependencies": {
    "@vue/cli-service": "^4.5.12",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  }

并添加以下 vue.config.js 文件，以便捆绑中只有一个文件

// vue.config.js
module.exports = {
  configureWebpack: {
    // No need for splitting
    optimization: {
      splitChunks: false
    }
  }
}

然后通过添加

  <script src="https://unpkg.com/vue"></script>
  <script src="./dist/my-app.min.js"></script>

到页面，我们可以使用组件（参见 dist/demo.html 以确认组件的最终名称）对我来说，这交付了所需的东西。希望有人能发现它有用。

于 2021-04-16T21:07:37.877 回答