vue3部署githubpages问题汇总
# 问题
# _plugin-vue_export-helper.js找不到,提示404
修改vite.config.ts
,在build.rollupOptions
里这样写
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// eslint-disable-next-line no-control-regex
const INVALID_CHAR_REGEX = /[\x00-\x1F\x7F<>*#"{}|^[\]`;?:&=+$,]/g;
const DRIVE_LETTER_REGEX = /^[a-z]:/i;
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
rollupOptions: {
output: {
sanitizeFileName(name) {
const match = DRIVE_LETTER_REGEX.exec(name);
const driveLetter = match ? match[0] : '';
return (
driveLetter +
name.slice(driveLetter.length).replace(INVALID_CHAR_REGEX, "")
);
},
},
},
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 页面不能正确的打开
因为使用github pages时,url上需要加上仓库名,所以需要在项目里做下修改,在vite.config.ts中设置base字段
export default defineConfig({
## 项目名,和仓库名保持一致
base: '/common-admin/',
})
1
2
3
4
2
3
4
修改router,和base保持一致
const router = createRouter({
history: createWebHistory("/common-admin/"),
routes: staticRoutes,
});
1
2
3
4
5
2
3
4
5
如果使用了axios来mock接口数据,也需要处理下baseurl
上次更新: 2024/08/08, 06:59:58