vue3+vite配置多页应用

下面是工程的目录结构，里面包含一个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配置入口主文件：

测试本地运行效果，网络资源加载正常：

 

测试打包的静态资源访问情况：

图表页：

登陆页资源访问正常：

 

 收工！