如何解决Vue 汇总构建的 min.js 文件不起作用 构建配置使用构建文件
我根据 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 举报，一经查实，本站将立刻删除。