如何在 vuejs3 中编译 vue 模板

Posted 2023-03-06

【中文标题】如何在 vuejs3 中编译 vue 模板

【英文标题】：how to compile vue template in vuejs3

【发布时间】：2021-05-30 18:42:56

【问题描述】：

我想开发一个 vue3 应用程序并使用 rollup 作为捆绑器。我写了一个vue 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报错： enter image description here

我也安装了@vue/compiler-sfc。

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

但模板仍未编译。

D:\LAB\DataVisualization\libs\src\index.js → dist\datav.umd.bundle.js, dist\datav.es.bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (2:4) in D:\LAB\DataVisualization\libs\src\Test.vue?vue&type=template&id=07bdddea&lang.js
src\Test.vue?vue&type=template&id=07bdddea&lang.js (2:4)
1:
2:     <div>
       ^
3:         message
4:     </div>
SyntaxError: Unexpected token (2:4) in D:\LAB\DataVisualization\libs\src\Test.vue?vue&type=template&id=07bdddea&lang.js
    at Object.pp$4.raise (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.js:15857:13)
    at Object.pp.unexpected (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.js:13549:8)
    at Object.pp$3.parseExprAtom (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.js:15256:10)
    at Object.pp$3.parseExprSubscripts (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.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"
  

【参考方案1】：

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