我正在使用：vue3、pnpm、vite
问题：我有一个 pnpm 工作区，有两个工作区文件夹，其中包含一个名为“shared”的项目（用于存放常见内容）的包，以及一个名为“apps”的文件夹，其中包含 4 个项目。这四个项目之一被命名为“root”，它是为了统一其他三个项目（当然是现在）并利用 SPA 路由的优势（这是一个简单的项目，只有一个 vue-router 实例并导入其他项目App.vue 文件并在子路由（例如 /panel 或 /scada）上使用它们。我可以成功构建除根项目之外的所有 app/* 项目，它会抛出以下错误：
vite v5.3.1 building for production...
│
│ (!) outDir C:\Projects\Frontend-Test2\Frontend\dist\root is not inside project root and will not be emptied.
│ Use --emptyOutDir to override.
│
│ transforming...
│ ✓ 75 modules transformed.
│ rendering chunks...
│ x Build failed in 11.01s
│ error during build:
│ [vite:build-html] The "fileName" or "name" properties of emitted chunks and assets must be strings that are neither absolute nor relative paths, received "../service-panel/index.html".
│ at getRollupError (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
│ at error (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
│ at FileEmitter.emitFile (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19278:24)
│ at Object.generateBundle (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:35257:14)
│ at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
│ at async Bundle.generate (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18153:9)
│ at async file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20692:27
│ at async catchUnfinishedHookActions (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20119:16)
│ at async build (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:65670:16)
│ at async CAC.<anonymous> (file:///C:/Projects/Frontend-Test2/Frontend/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/cli.js:828:5)
└─ Failed in 20.1s at C:\Projects\Frontend-Test2\Frontend\apps\root
我需要什么：我需要根项目成功构建并使用 vite 预览运行，并具有功能性 SPA 路由。与此同时，我需要每个项目的构建文件夹在 dist 文件夹中都不同（我目前的 dist 文件夹中有 4 个文件夹，位于 pnpm、服务面板、scada、票务、root - 根文件夹的根目录中） /dist/root 上应该有 3 个以每个项目命名的文件夹和一个来自根项目的 index.html，并在根项目中运行 vite build 时在其中构建它们，我之前已经这样做过，但我可能无法再次重新创建它）我需要修复顺风样式（某些样式（例如 flex 和 flex-row）将被编译，但其他样式则不会 - 例如 bg-green-200 或 w-10）
谢谢大家...
+---apps
¦ +---root
¦ ¦ +---cypress
¦ ¦ ¦ +---e2e
¦ ¦ ¦ +---fixtures
¦ ¦ ¦ +---support
¦ ¦ +---public
¦ ¦ +---src
¦ ¦ ¦ +---assets
¦ ¦ ¦ +---components
¦ ¦ ¦ ¦ +---__tests__
¦ ¦ ¦ +---router
¦ ¦ ¦ +---stores
¦ ¦ ¦ +---views
¦ +---scada
¦ ¦ +---cypress
¦ ¦ ¦ +---e2e
¦ ¦ ¦ +---fixtures
¦ ¦ ¦ +---support
¦ ¦ +---public
¦ ¦ +---src
¦ ¦ ¦ +---assets
¦ ¦ ¦ +---components
¦ ¦ ¦ ¦ +---icons
¦ ¦ ¦ ¦ +---__tests__
¦ ¦ ¦ +---router
¦ ¦ ¦ +---stores
¦ ¦ ¦ +---views
¦ +---service-panel
¦ ¦ +---cypress
¦ ¦ ¦ +---e2e
¦ ¦ ¦ +---fixtures
¦ ¦ ¦ +---support
¦ ¦ +---public
¦ ¦ +---src
¦ ¦ ¦ +---assets
¦ ¦ ¦ ¦ +---fonts
¦ ¦ ¦ ¦ ¦ +---iran_sans
¦ ¦ ¦ ¦ ¦ +---iran_yekan
¦ ¦ ¦ ¦ +---images
¦ ¦ ¦ +---components
¦ ¦ ¦ ¦ +---Layout
¦ ¦ ¦ +---router
¦ ¦ ¦ +---stores
¦ ¦ ¦ +---views
¦ ¦ ¦ +---Auth
¦ ¦ ¦ ¦ +---Login
¦ ¦ ¦ +---Dashboard
¦ +---ticketing
¦ +---cypress
¦ ¦ +---e2e
¦ ¦ +---fixtures
¦ ¦ +---support
¦ +---public
¦ +---src
¦ ¦ +---assets
¦ ¦ ¦ +---css
¦ ¦ ¦ +---fonts
¦ ¦ ¦ ¦ +---iran_sans
¦ ¦ ¦ ¦ +---iran_yekan
¦ ¦ ¦ +---images
¦ ¦ +---components
¦ ¦ ¦ +---icons
¦ ¦ ¦ +---__tests__
¦ ¦ +---router
¦ ¦ +---stores
¦ ¦ +---views
+---packages
+---shared
+---cypress
¦ +---e2e
¦ +---fixtures
¦ +---support
+---public
+---src
+---assets
¦ +---css
¦ +---fonts
¦ ¦ +---iran_sans
¦ ¦ +---iran_yekan
¦ +---images
+---components
¦ +---ActionSheets
¦ +---Carts
¦ +---Charts
¦ +---icons
¦ +---Layout
¦ +---Map
¦ +---Support
+---layouts
¦ +---auth
¦ +---main
¦ +---Asides
¦ +---SubComponents
¦ +---Aside1
¦ +---Aside2
¦ +---Level2
¦ +---Level3
+---router
+---stores
+---views
+---Errors
+---PublicPages
下面我将分享必要的文件来检查（如果需要任何其他文件，请评论）：
pnpm工作区文件的根目录：
package.json：
{
"name": "flowmeter-pnpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build:all": "pnpm recursive run build",
"test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cypress-real-events": "^1.11.0",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-i18n": "^9.9.1",
"vue-router": "^4.3.0",
"vue3-cookies": "^1.0.6"
},
"devDependencies": {
"@cypress/code-coverage": "^3.12.23",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/test-utils": "^2.4.5",
"cypress": "^13.7.2",
"jsdom": "^24.0.0",
"start-server-and-test": "^2.0.3",
"vite": "^5.2.8",
"vite-plugin-vue-devtools": "^7.0.25",
"vitest": "^1.4.0",
"@vitest/coverage-istanbul": "^1.3.1",
"@vitest/ui": "^1.3.0",
"autoprefixer": "^10.4.19",
"concurrently": "^8.2.2",
"istanbul-lib-coverage": "^3.2.2",
"less": "^4.2.0",
"postcss": "^8.4.38",
"sonar-scanner": "^3.1.0",
"tailwindcss": "^3.4.3"
}
}
pnpm-workspaces.yaml 文件：
packages:
- 'apps/*'
- 'packages/*'
项目“根”： package.json：
{
"name": "root",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test:unit": "vitest",
"test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'"
}
}
vite.config.js：
import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import {resolve} from 'path'
const __parent = __dirname.split("\\");
__parent.pop();
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({template: {transformAssetUrls: {base: null, includeAbsolute: false}}}),
VueDevTools(),
],
build: {
outDir: '../dist/root',
rollupOptions: {
input: {
'service-panel': resolve('../service-panel/index.html'),
},
// input: {
// 'panel': resolve(__parent.join("\\"), 'service-panel\\index.html'),
// 'scada': resolve(__parent.join("\\"), 'scada\\index.html'),
// 'support': resolve(__parent.join("\\"), 'ticketing\\index.html')
// },
output: {
entryFileNames: '[name]/assets/[name].js',
chunkFileNames: '[name]/assets/[name].js',
assetFileNames: '[name]/assets/[name].[ext]'
}
}
},
server: {port: 4180},
preview: {port: 4180},
esbuild: {target: "esnext"},
resolve: {
alias: {
'@root': fileURLToPath(new URL('./src', import.meta.url)),
'@pooyac/apps': fileURLToPath(new URL('../../apps', import.meta.url)),
'@pooyac/shared': fileURLToPath(new URL('../../packages/shared', import.meta.url)),
}
}
})
tailwind.config.js：
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
router.js：
import { createRouter, createWebHistory } from 'vue-router'
import Panel from '@pooyac/apps/service-panel/src/App.vue';
import Scada from '@pooyac/apps/scada/src/App.vue';
import Ticketing from '@pooyac/apps/ticketing/src/App.vue';
import PathNotFound from '@pooyac/shared/src/views/Errors/Error404.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: '/service-panel', component: Panel },
{ path: '/scada', component: Scada },
{ path: '/ticketing', component: Ticketing },
{ path: '/:pathMatch(.*)*', component: PathNotFound },
]
})
export default router;
const __parent = __dirname.split("\\");
__parent.pop();
现在父级将拥有父目录地址并且该值是有效的，但由于 vite 访问父目录的限制，它不起作用。
import {fileURLToPath, URL} from 'node:url'
import {resolve} from 'path'
我放弃了这种方法，但我认为所有问题都回到了
build.rollupOptions.outputvite.config.js