• vite build 后，空白页面问题 Hash 模式 build后空白页的问题可能是使用的是历史模式，因为Vue是一个单页的客户端应用，如果没有适当的服务器配置，访问会得到一个 404 错误。使用Hash模式接口解决这个问题，因为使用Hash模式后由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。

import { createRouter, createWebHashHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

配置Spring Boot

Spring Boot只需要将build后的文件放在resources\static位置下即可。

vite.config

.env.production：

1. 生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件

2. 会覆盖 .env这个文件里定义的环境变量。

3. 打印环境变量

   1. console.log(import.meta.env)

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue';
import path from "path";
import { resolve } from 'path'
const port = 8080;
const host = "0.0.0.0";
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  return {
    plugins: [
      vue(),
    ],
    base: env.VITE_MODE === 'production' ? './' : '/',
    resolve: {
      alias: {
        //resolve.alias设置别称 解决@绝对路径引入问题
        "@": path.resolve(__dirname, 'src'),
        "@assets": path.resolve(__dirname, "src/assets"),
        "@components": path.resolve(__dirname, "src/components"),
        "@images": path.resolve(__dirname, "src/assets/images"),
        "@views": path.resolve(__dirname, "src/views"),
        "@store": path.resolve(__dirname, "src/store"),
      },
    },
    css: {
      // css预处理器
      preprocessorOptions: {
        less: {
          modifyVars: {
            // 全局less变量存储路径(配置less的全局变量)
            hack: `true; @import (reference) "${resolve('src/public/config.less')}";`,
          },
          javascriptEnabled: true,
        }
      }
    },
    build: {
      outDir: "dist",
      assetsDir: "assets", //指定静态资源存放路径
      sourcemap: false, //是否构建source map 文件
      // terserOptions: {
      //   // 生产环境移除console
      //   compress: {
      //     drop_console: true,
      //     drop_debugger: true,
      //   },
      // },
    },
    server: {
      https: false, // 是否开启 https
      open: true, // 是否自动在浏览器打开
      port: port, // 端口号
      host: host,
      proxy: {
        "/api": {
          target: env.VITE_RES_URL, // 后台接口
          changeOrigin: true,
          secure: false, // 如果是https接口，需要配置这个参数
          ws: true, //websocket支持
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  }
})

defineProps

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
 
  </div>
</template>