低代码-指定卡片打包-component:is&defineAsyncComponent加载远端组件

npm run 执行package.json中的scripts配置时如何参数传递 www.zhihu.com/question/54…

vite 命令传参 build: vite build --mode production vite 指定使用的配置文件 build: vite -c vite.remote.card.config.ts build 其中-c和--config可以指定配置文件

以右图为例： npm run 向scripts的build:card命令传递参数 mode = hello-world:test-demo scripts的build:card语句执行vite命令 先删除dist文件夹，再指定用vite.remote.car.config.ts文件为配置文件 执行vite build命令，并使用npm run 穿来的参数npm_config_mode 然后再vite.remote.config.ts中 初始参数的mode属性获取到vite命令传递的指 mode = hello-world:test-demo

而想要将某一个vue文件打包出来， 需要使用build.lib模式，告诉vite，我们不是想要打包成html文件。

如右图 可以看到我们的打包入口是aboutview.vue文件 我们期望的是只输出一个js文件，css最好是内嵌在js中 但是同时输出了js和css文件

-----vite.remote.card.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig((obj) => {
  console.log(obj)
  return {
    plugins: [
      vue(),
      vueJsx(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    build: {
      lib: {
        entry: "./src/views/AboutView.vue",
        formats: ["es"],
        name: "AboutView",
        fileName: "AboutView",
      },
      outDir: "dist/card/AboutView"
    }
  }
})

----package.json
"scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "build:card": "rimraf dist && vite -c vite.remote.card.config.ts build --mode %npm_config_mode%"
  },

// "build:card": "rimraf dist && vite -c vite.remote.card.config.ts build --mode %npm_config_mode%" /**

• 配置scripts命令，并通通过npm run 来传递参数的方法
• www.zhihu.com/question/54… */