企图使用rollup搭建一个vue开发环境，用来复现一个bug的辛苦历程，以失败告终

最新推荐文章于 2023-05-23 09:38:34 发布

anywo01

最新推荐文章于 2023-05-23 09:38:34 发布

阅读量429

点赞数

本文链接：https://blog.youkuaiyun.com/y1377593732/article/details/125588659

版权

失败的尝试专栏收录该内容

1 篇文章

订阅专栏

本文分享了使用pnpm、Rollup、Vue@2.6.14及Ant Design Vue搭建开发环境的过程，包括配置rollup.config.js文件及遇到的问题。作者在尝试构建过程中遇到了一些错误，并寻求社区的帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预期

使用pnpm + rollup + vue@2.6.14 + ant-design-vue@1.7.8搭建一个开发环境

目录结构

在这里插入图片描述

环境搭建的源码

rollup.config.js

import vuePlugin from "rollup-plugin-vue";
import serve from "rollup-plugin-serve";
import html from "@rollup/plugin-html";
import livereload from "rollup-plugin-livereload";
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import json from "@rollup/plugin-json";
import { babel } from "@rollup/plugin-babel";
import { getBabelOutputPlugin } from "@rollup/plugin-babel";

export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "es",
  },
  plugins: [
    vuePlugin(),
    html(),
    commonjs({
      include: /node_modules/,
    }),
    resolve(),
    getBabelOutputPlugin({
      presets: [
        [
          "@babel/preset-env",
          {
            useBuiltIns: "usage",
            corejs: "3",
          },
        ],
      ],
      plugins: [["@babel/plugin-transform-runtime", { useESModules: true }]],
    }),
    postcss({
      plugins: [],
    }),
    json(),
    replace({
      "process.env.NODE_ENV": JSON.stringify("production"),
      __buildDate__: () => JSON.stringify(new Date()),
      __buildVersion: 15,
    }),
    livereload("dist"),
    serve("dist"),
  ],
};

main.js

import Vue from "vue";
import App from "./App.vue";
import Antd from 'ant-design-vue'
import "./script/template";
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false;

Vue.use(Antd);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

template.js

(function () {
  const app = document.createElement("div");
  app.id = "app";
  document.body.appendChild(app);
})();

报错内容

起服务勉强正常

在这里插入图片描述

添加label时的报错

在这里插入图片描述

注释掉label时的报错信息

在这里插入图片描述
对应的报错位置

闲谈

我选择放弃，重新用vue-cli分分钟搞定 #笑哭
有大神知道咋个回事，给提点提点，#拜托