Pressidian
花园入口
笔记
项目
关于
实验室
GitHub
花园入口
笔记
项目
关于
实验室
GitHub

KNOWLEDGE PATHS

笔记库
当前位置
笔记库/前端/工程化/构建打包/Vite

常见问题

1 分钟阅读 · Note

目录树 578 篇

            • 常见问题
            • public与assets的区别 ⌚️
            • Vite
          • 打包优化
          • ESbuild
          • Rollup
          • Vite与Webpack的区别
      • 前端技术栈
    • 笔记目录
    • CLAUDE.md
    • Vue 组件与 Render 函数

关联笔记 6

↗public与assets的区别 ⌚️同一路径↗Vite同一路径↗打包优化共同主题↗打包原理共同主题↗魔法注释Magic Comments共同主题↗ESbuild共同主题
  • 常见问题

常见问题

  • 打包指令:npm run build
  • 出现空白页的问题,路径问题
  • 改为相对路径,在vite.config.js中配置路径:base:'./'
  • 没有报错但也没有页面,是router的原因,使用在router/index.js中history项使用createMemoryHistory函数即可显示.
  • 部署后白屏,注意部署在github pages上时要修改为对应仓库的名字base: '/yike/'
import { fileURLToPath, URL } from 'node:url'

// 这两个是比较常用的
import { defineConfig } from 'vite'

// 没有这个插件就无法解析.vue文件
import vue from '@vitejs/plugin-vue'


import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
    plugins: [vue(), vueDevTools()],
    base: '/yike/',
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
          @use "@/styles/var.scss" as *;
        `,
            },
        },
    },
})