我建立了一个库项目(Vue 3, Vite)，我想通过package.json将它包含在主机项目中。
但是我遇到了一个问题，我可以导入组件并使用这些导入的组件运行一个简单的程序，但是它们的样式已经消失了。
请让我知道我的配置有什么问题。当我必须手动导入css到我的主机项目时，这是没有意义的。
只是为了澄清，我在我的项目中没有任何.css源文件。style.css是由我的*.vue组件编译的
这是我的图书馆项目的vite.config.ts。我需要导出的所有内容都在src/中。
// Library project
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import typescript from '@rollup/plugin-typescript';
const path = require("path")
// https://vitejs.dev/config/
export default defineConfig( {
plugins: [{
...typescript( { tsconfig: "./tsconfig.json" } ),
apply: "build",
declaration: true,
declarationDir: "types/",
rootDir: "/",
}, vue()],
resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
build: {
lib: {
entry: path.resolve(__dirname, "src/index.ts"),
name: "gsd-vue-egui",
// fileName: (format) => `gsd-vue-egui.${format}.js`,
},
rollupOptions: {
external: ["vue"],
output: {
// Provide global variables to use in the UMD build
// Add external deps here
globals: { vue: "Vue" },
},
},
},
server: {
port: 30001,
}
} )
这是我的package.json
{
"name": "gsd-vue-egui",
"private": true,
"version": "0.0.0",
"scripts": {
"preinstall": "npx npm-force-resolutions",
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"test": "npm run test:unit",
"test:unit": "jest --config=jest.config.js test",
"lint:css": "stylelint --formatter verbose --config .stylelintrc "." --fix",
"lint:eslint": "eslint --ext js,vue,ts "." --fix",
"lint": "npm run lint:css && npm run lint:eslint"
},
...
}
运行npm run build后我的dist/文件夹结构如下:
dist/
|-components/
| |-Button.vue.d.ts
|-App.vue.d.ts
|-MyLibraryName.es.js
|-MyLibraryName.umd.js
|-index.d.ts
|-main.d.ts
|-style.css
你需要手动导入你的CSS，因为你在包中单独发布了JS和CSS文件。如果你不想手动导入CSS，你需要为npm打包你的SFC文件。这是Vue 2的文档，但它的思想可以完全适用于Vue 3。
这里有一些注意事项:
- 你必须将
.vue文件与npm包一起发布，不要将/src文件夹添加到.npmignore文件 在您的主机项目中，直接从您的包 - 此方法不适用于任何希望通过
<script>标签直接在浏览器中使用组件的人，任何使用仅运行时构建或构建进程的人，这些进程不了解如何处理.vue文件 - 一些组件可能会提供像指令这样的副作用，或者扩展其他具有额外功能的库 手动导入CSS文件从来都不是一个坏主意，几乎所有我知道的Vue包都使用这种方法
import YourComponent from 'your-package/src/your-component.vue'中导入.vue文件。