VUE3项目在工作中遇到的几个打包和发布问题

1.访问静态资源文件404(js、css等)

vue3项目执行npm run build命令打包后，放到服务器下运行(部署流程与VUE2基本类似)，访问的时候提示资源文件找不到：

访问的文件不存在，主要是因为路径配置问题。打包静态文件必须是根路径，否则放到服务器找不到静态资源(同理于webpack中的publicPath的配置)。解决方法为在项目根目录下的vite.config.js文件中添加base配置：

import ******

******

export default defineConfig({
  base: "./",// 等同于 assetsPublicPath: './'
  plugins: [
    vue(),
  ],
  ******
})

修改后重新打包，问题解决。

2.打包后访问界面空白

vue3打包后访问页面内容不展示：

解决方式为将router/index.js文件中的路由模式改为createWebHashHistory。

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// ------ 引入界面 ------
import index from '../views/index/index.vue' 
******
const router = createRouter({
	// 修改前
  // history: createWebHistory(import.meta.env.BASE_URL),
	// 修改后
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    ******
  ]
})

export default router

3.引入大屏组件datav打包的时候报错

vue引入datav在运行的时候正常，但打包的时候出错：

将node_modules/@dataview/datav-vue3/package.json文件中的module项index.js改为index.mjs：