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

Question

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

[!] 错误：节点_modules/vue/dist/vue未导出“openBlock”。运行时。esm。js，由src/js/components/TestButton导入。vue？vue

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>

卷起来。配置。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之前加载通用js，我会得到不同的错误

[!] （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

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

Answer 1

终于找到了解决办法

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