Vue 汇总构建的 min.js 文件不起作用 构建配置使用构建文件

编程问答 2022-05-01

问题描述

我根据 Vue.js 站点使用了官方汇总配置

https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

构建正确完成，但是当我导入 min.js 文件时，我无法让组件工作。

构建配置

rollup.config.js

import commonjs from "@rollup/plugin-commonjs"; // Convert Commonjs modules to ES6
import vue from "rollup-plugin-vue"; // Handle .vue SFC files
import buble from "@rollup/plugin-buble"; // Transpile/polyfill with reasonable browser support

export default {
  input: "src/wrapper.js",// Path relative to package.json
  output: {
    name: "MyComponent",exports: "named",},plugins: [
    vue({
      compileTemplate: true,// Explicitly convert template to render function
    }),commonjs(),buble({
      exclude: "node_modules/**",}),// Transpile to ES5
  ],};

my-component.vue

<template>
  <h1>Hello</h1>
</template>

<script>
export default {
  name: "my-component",};
</script>

package.json

{
  "scripts": {
    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/my-component.min.js"
  },"devDependencies": {
    "@rollup/plugin-buble": "^0.21.3","@rollup/plugin-commonjs": "^19.0.0","rollup": "^2.48.0","rollup-plugin-vue": "^6.0.0","vue-template-compiler": "^2.6.12"
  }
}

使用构建文件

index.html

<body>
  <div class="" id="app">
    <my-component></my-component>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./dist/my-component.min.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",});
  </script>
</body>

当我这样做时，我收到一个关于未定义 vue 的错误，尽管构建配置成功，但 my-component 组件并未呈现。我是汇总的新手，我遵循了 Vue 指南，所以我不知道我做错了什么。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

rolluptranspilervue.js