下面是工程的目录结构，里面包含一个index.html作为图表页的应用访问入口，login.html页作为登录页的应用访问入口。
对应的vite.config.js的配置，主要是配置root、base、build这几个属性，具体说明参考下方注释：
import { resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
//把root指向/src/pages/，编译时在此目录下编译
root: "./src/pages/",
//设置静态资源相对路径，index.html和login.html等入口文件的静态资源读取相对路径
base: "./",
//文件名哈希
filenameHashing: true,
lintOnSave: true,
build: {
//设置打包出来的静态资源存放目录
assetsDir: "static",
rollupOptions: {
//配置多页应用程序入口文件
input: ["./src/pages/index.html", "./src/pages/login.html"],
//打包到目标目录
output: { dir: "./dist" },
},
},
resolve: {
alias: {
// 配置别名
"@": resolve(__dirname, "./src"),
},
},
css: {
// css预处理器
preprocessorOptions: {
scss: {
charset: false,
additionalData: '@import "./src/assets/scss/theme.scss";',
},
},
},
// 本地运行配置，及反向代理配置
server: {
host: "localhost", // 指定服务器主机名
port: 8001, // 指定服务器端口
open: true, // 在服务器启动时自动在浏览器中打开应用程序
https: false, // 是否开启 https
},
});
最后一步，配置程序入口文件的相对路径
index.html配置入口主文件：
login.html配置入口主文件：
测试本地运行效果，网络资源加载正常：
测试打包的静态资源访问情况：
图表页：
登陆页资源访问正常：
收工！
