rollup+ts+vue2.7构建项目报错问题？

Z时代
2024-02-27
分类：IT

问题：执行命令 npx tsx build.ts 报错

Error: RollupError: src/App.vue?vue&type=script&setup=true&lang.ts:2:27 - error TS2614: Module '"vue"' has no exported member 'vShow'. Did you mean to use 'import vShow from "vue"' instead?2 import { unref as _unref, vShow as _vShow, createVNode as _createVNode, withDirectives as _withDirectives, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

vue版本 2.7.10， node环境 16.13.0

build.ts

import typescript from 'rollup-plugin-typescript2';
import { rollup } from 'rollup';
import path, { resolve } from 'node:path';
import type { RollupOptions } from 'rollup';
import vue from 'rollup-plugin-vue';
import DefineOptions from 'unplugin-vue-define-options/rollup';
import getCommitId from './build-utils';
import packageData from './package.json';
import nodeReslove from '@rollup/plugin-node-resolve';
import jsonResolve from '@rollup/plugin-json';
import alias from '@rollup/plugin-alias';
import postcss from 'rollup-plugin-postcss';
import commonResolve from 'rollup-plugin-commonjs';
const { name, version } = packageData;
const dirname = resolve();
const rollupOptions: RollupOptions = {
    input:  {
        main: resolve(dirname, './src/main.ts'),
    },
    plugins: [
        DefineOptions(),
        nodeReslove(),
        jsonResolve(),
        alias({
            entries: [
                {
                    find: '@',
                    replacement: resolve(dirname, 'src')
                }
            ]
        }),
        typescript( {
            tsconfig: './tsconfig.json'
        }),
        vue(),
        postcss(),
    ],
    output: {
        chunkFileNames: 'assets/scripts/[name]-[hash].js',
        entryFileNames: 'assets/scripts/[name]-[hash].js',
        assetFileNames({ name: filePath }) {
            // 将资源进行分类
            const extReg = /\.([\s\S]+)$/;
            if (filePath) {
                const extRes = extReg.exec(filePath);
                if (extRes) {
                    const ext = extRes[1];
                    let classify = ext;
                    if (/^css|scss|less|sass$/.test(ext)) {
                        classify = 'styles';
                    } else if (/^webp|png|jpg|jpeg|gif$/.test(ext)) {
                        classify = 'images';
                    }
                    return `assets/${ classify }/[name]-[hash].[ext]`;
                }
            }
            return 'assets/[name]-[hash].[ext]';
        },
        manualChunks: {
            vue: ['vue', 'vue-router'], // 分包，按需加载
        },
    },
}
const build = async () => {
    try {
        const bundle = await rollup(rollupOptions);
        // console.log(bundle);
    } catch(e) {
        throw new Error(e);
    }
}
build();