Vue3+vite2打包路径和路由router-view不显示问题

前言

博主使用vue3+vite2打包项目部署到服务器上时遇到几个有关路径的坑，将这些坑的原因及解决方法提供给大家，希望大家可以有所收获

一、打包默认路径

以前在vue2+webpack中我们在vue.config.js配置publicPath设置静态资源访问路径，但现在使用vue3+vite2环境我们需要在vite.config.js里面配置base;顺便一提，里面的chunkSizeWarningLimit配置的是打包块的大小，单位为kb

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  build: {
    outDir: "font",
  },//打包文件夹名称配置
  plugins: [vue()],
  base: './',//配置打包相对路径
  build: {//配置打包块大小
    chunkSizeWarningLimit:1500,
  },
})

二、css的@charset UTF-8规则

在打包时由于css文件font-family规则 影响了@charset UTF-8规则，我使用直接去除charset规则的影响

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  base: './',//配置打包相对路径
  css: {//去除@charset UTF-8规则影响
    postcss: {
      plugins: [
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            }
          }
        }
      ]
    }
  },
  build: {//配置打包块大小
    chunkSizeWarningLimit:1500,
  },
  server:{//配置网络服务
     host:'0.0.0.0'
  }
})

三、路由router-view不显示

上面的坑解决后访问项目(vite打包的项目需要在服务端环境才可以正常访问，不能直接客户端浏览器访问),发现router-view内容不显示，发现是router配置问题下面是博主原先的写法，这样打包之后就会导致router-view不显示

 import {createRouter, createWebHistory} from "vue-router";

// 路由信息
const routes = [
    {
        path: "/",
        name: "Home",
        component:  () => import('../views/Home/index.vue'),
    },
];

// 导出路由
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

因为在没有后端配合的情况下路由模式为history，页面不会重新加载，应该改为hash模式，如下所示，就可以成功解决该问题

import {createRouter, createWebHashHistory} from "vue-router";

// 路由信息
const routes = [
    {
        path: "/",
        name: "Home",
        component:  () => import('../views/Home/index.vue'),
    },
];

// 导出路由
const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

总结

以上就是博主打包项目过程中遇到的问题，希望大家可以有所收获；如果文章存在问题，欢迎大家评判指正！！！