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

作者站长头像
站长
· 阅读数 12

问题:执行命令 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();

题外话:用vue2.7而不用vue3.0的原因是因为还需要支持android5.0。不用vite的生产环境打包是因为生产后的页面需要是file协议的离线页面。如果有让vite生产纯离线的页面的方法也请不吝赐教。感谢

回复
1个回答
avatar
test
2024-07-17

找到了问题所在,即使是vue2.7也需要使用rollup-plugin-vue 5.19版本。并且要搭配vue-template-compiler。rollup-plugin-vue 6.x只支持vue3

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容