开发模式所有加载正常显示,打包部署到服务器非根目录后子组件没有加载出来,出现空白页面,但是没有报错;
router路由配置:
import { createRouter, createWebHistory } from 'vue-router'
import login from '../components/login.vue';
var router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: login
},
]
});
var load=0;
router.beforeEach((to,from,next)=>{
next();
})
export default router
vite.config.js配置:
```javascript
import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(mode => {
const env = loadEnv(mode.mode, process.cwd())
return {
// 获取项目根路径变量,其他变量类似
base: './',
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server:{
host: '0.0.0.0',
// 端口
port: 8080,
// 是否开启 https
https: false,
// 设置反向代理,跨域
proxy: {
'/api': {
// 后台地址
target: 'http://192.168.0.35',
ws:true,
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '') // 重定向删除'/api'
}
}
},
build:{
//指定输出路径
outDir: "dist",
//生成静态资源的存放路径
assetsDir: "assets",
//启用/禁用 CSS 代码拆分
cssCodeSplit: true,
//构建后是否生成 source map 文件
sourcemap: false,
//自定义底层的 Rollup 打包配置
rollupOptions: {
},
//默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录。
emptyOutDir: true,
assetsPublicPath: './',
}
}
})
```