vue3关于那些打包的事儿

前沿
最近在开发一款中后台的项目，在打包时遇到的一些问题，记录下。可能不会持续记录，哈哈哈哈。。。

打包后空白页

一般项目进行到最后阶段，就是打包上线了，打包配置配的好，项目顺利验收，相反，嗯哼，那就抓耳挠腮了。。。
首先项目采用的是vue3.0开发，单文件组件采用<script setup>。采用Vite3作为项目开发、打包工具，那么，我们首先要在项目中找到**vite.config.ts**配置文件，没错，我们要开始行动了。。。

1. 在文件中找到 base，如果没有的话，可以自己添加一个，并设置为 base: "./"
2. 再次在文件中找到 build，如果没有的话，可以自己加一个，设置如下：
   

build: {// 打包配置
      assetsDir: 'static/assets',
      minify: isProduction,
      sourcemap: isProduction ? false : true,
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          dir: "dist",
        }
      }
    }

上图中的 isProduction变量，是在文件开头定义的

// 生产环境是否生成source map
const isProduction = process.env.NODE_ENV === 'production';

修改路由配置，router/index.js

默认使用的 createWebHistory，就是因为使用的 createWebHistory，所以不显示内容，我们需要改成 createWebHashHistory

// 1.需要引入 
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 2.修改配置
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

好好好，配置到这里，想必网页应该是可以显示出来了吧。。。。

结束语

我在工位打卡，努力不负韶华…