使用 Rollup 使用 Vue 编译 javascript 时出错答案

【问题标题】：Error when compiling javascript with Vue using Rollup使用 Rollup 使用 Vue 编译 javascript 时出错
【发布时间】：2021-09-23 07:36:55
【问题描述】：

我在尝试使用汇总编译我的 Vue 脚本时遇到问题。我得到的错误是

[!] 错误：“openBlock”不是由 node_modules/vue/dist/vue.runtime.esm.js，由导入 src/js/components/TestButton.vue?vue&type=template&id=543aba30&lang.js https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

app.js

import Vue from 'vue/dist/vue'
import Buefy from 'buefy'

Vue.use(Buefy)

import ButtonTest from './components/TestButton.vue'

Vue.component('ssm-button', ButtonTest);

var app = new Vue({
    el: '#app',
    data: {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})

TestButton.vue

<template>
    <div>
        asdf
    </div>
</template>
<script>
export default {}
</script>

rollup.config.js

'use strict'

const path = require('path')
const { babel } = require('@rollup/plugin-babel')
const banner = require('./banner.js')
const { nodeResolve } = require('@rollup/plugin-node-resolve')

import multi from '@rollup/plugin-multi-entry'
import vuePlugin from 'rollup-plugin-vue'
import replace from '@rollup/plugin-replace'
import commonjs from '@rollup/plugin-commonjs'

let fileDest = 'app.js'

const external = ['jquery']
const plugins = [
  vuePlugin(),
  replace({
    preventAssignment: true,
    'process.env.NODE_ENV': JSON.stringify( 'production' )
  }),

  babel({
    // Only transpile our source code
    exclude: 'node_modules/**',
    // Include the helpers in the bundle, at most one copy of each
    babelHelpers: 'bundled'
  }),
  nodeResolve(),
  multi(),
  commonjs(),
]
const globals = {
  jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
  'popper.js': 'Popper'
}


module.exports = [
  {
    input: [path.resolve(__dirname, '../js/app.js'), path.resolve(__dirname, '../js/custom.js')],
    output: {
      banner,
      file: path.resolve(__dirname, `../../assets/js/${fileDest}`),
      format: 'umd',
      globals,
      name: 'main-javascript'
    },
    external,
    plugins,
  },
]

我尝试了很多不同的方法，但似乎没有任何帮助。但是，如果我在配置中的 vuePlugin 之前加载 commonjs，我会得到一个不同的错误

[!] (plugin commonjs) SyntaxError: Unexpected token (2:4) in /Users/xxx/Dev/self-storage-manager/wordpress_data/wp-content/themes/Bulmascores/src/js/components/TestButton.vue?vue&type=template&id=543aba30&lang.js src/js/components/TestButton.vue?vue&type=template&id=543aba30&lang.js (2:4) 1:2: ^ 3: asdf 4:

有人知道发生了什么吗？过去两天我一直在研究这个问题，但似乎真的找不到解决方案。

【问题讨论】：

标签： javascript vue.js rollup

【解决方案1】：

终于找到解决办法了

我将 rollup vue 插件从 @rollup/plugin-vue 更改为 rollup-plugin-vue2 https://github.com/thgh/rollup-plugin-vue2，现在它可以工作了。

【讨论】：