如何在vuejs3中编译vue模板

Question

我想开发一个vue3应用程序，并使用rollup作为打包器。我写了一个值sfc

<template>
<div>
{{message}}
</div>
</template>
<script>
export default {
name: 'TestComponent',
setup(){
const message = '123456';
return {
message
}
}
}
</script>
<style lang="scss" scoped>
.red{
color: red;
}
</style>

并将其导入到条目js文件中。

import Test from './Test.vue';
export default function (Vue) {
Vue.component(Test.name, Test);
}

然后我安装了rollup-plugin-vue来编译vue sfc, postcss和sass来编译sass

const path = require('path');
const inputPath = path.resolve(__dirname, './src/index.js');
const outputUMDPath = path.resolve(__dirname, './dist/datav.umd.bundle.js');
const outputESPath = path.resolve(__dirname, './dist/datav.es.bundle.js');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const babel = require('rollup-plugin-babel');
const json = require('rollup-plugin-json');
const vue = require('rollup-plugin-vue');
const postcss = require('rollup-plugin-postcss');
export default {
input: inputPath,
output: [{
file: outputUMDPath,
format: 'umd', 
name: 'datav-bundle', 
globals: {
vue: 'vue'
}
}, {
file: outputESPath,
format: 'es',
globals: {
vue: 'vue'
}
}],
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**', 
}),
json(),
vue(),
postcss({
plugins: []
})
],
external: [
'vue'
]
}

IDE报告了一个错误:输入图片描述

我安装了@vue/compiler-sfc。

"@vue/compiler-sfc": "^3.0.6",

但模板仍未编译。

D:LABDataVisualizationlibssrcindex.js → distdatav.umd.bundle.js, distdatav.es.bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (2:4) in D:LABDataVisualizationlibssrcTest.vue?vue&type=template&id=07bdddea&lang.js
srcTest.vue?vue&type=template&id=07bdddea&lang.js (2:4)
1:
2:     <div>
^
3:         {{message}}
4:     </div>
SyntaxError: Unexpected token (2:4) in D:LABDataVisualizationlibssrcTest.vue?vue&type=template&id=07bdddea&lang.js
at Object.pp$4.raise (D:LABDataVisualizationlibsnode_modulesrollupdistsharedrollup.js:15857:13)
at Object.pp.unexpected (D:LABDataVisualizationlibsnode_modulesrollupdistsharedrollup.js:13549:8)
at Object.pp$3.parseExprAtom (D:LABDataVisualizationlibsnode_modulesrollupdistsharedrollup.js:15256:10)
at Object.pp$3.parseExprSubscripts (D:LABDataVisualizationlibsnode_modulesrollupdistsharedrollup.js:15059:19)

我做错了什么吗?这是我的package.json

{
"name": "libs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "rollup -wc rollup.config.dev.js",
"build": "rollup -c rollup.config.dev.js",
"build:prod": "rollup -c rollup.config.prod.js"
},
"keywords": [],
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.8",
"@babel/preset-env": "^7.13.8",
"@vue/compiler-sfc": "^3.0.6",
"rollup": "^2.40.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^6.0.0",
"sass": "^1.32.8",
"vue": "^3.0.6"
},
"dependencies": {
"sam-test-data": "0.0.5"
}
}

Answer 1

哦，我想也许我知道原因，我安装了rollup-plugin-vue@6.0.0-beta.6而不是*@6.0.0，编译成功!