vue.js typescript node.js vite配置多页面入口

1、项目结构：

2、修改vite.config.ts 文件：

完整的vite.config.ts文件：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { resolve } from 'path';

// import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig(({ command, mode }) => {

/**

* command - 命令模式

* mode - 生产、开发模式

*/

return {

// 项目根目录，index.html 所在的目录

// 要配置多页面，所以此处更改项目根目录地址，不再是项目根目录

// 而是指定的目录下， 以便配置多页面index.html入口

root: resolve(__dirname, 'src'),

// 静态资源服务目录地址

// 根目录变化，原来的public静态资源目录则需要，指向

publicDir: resolve(__dirname, './public'),

// 存储缓存文件的目录地址

cacheDir: '',

//

resolve: {

// 设置文件目录别名

// 根目录地址变更，也需要调整

alias: {

'@': resolve(__dirname, './src'),

},

},

// ...

// 构建配置项

build: {

// ...

// 指定输出目录

outDir: resolve(__dirname, 'apply'),

// 指定静态资源存放目录

assetsDir: '',

// 启用、禁用css代码拆分

cssCodeSplit: true,

// 构建是否生成source map文件

sourcemap: 'inline',

// rollup 配置打包项

rollupOptions: {

// 多页面入口配置

input: {

apply: resolve(__dirname, 'src/pages/index/index.html'),

chain: resolve(__dirname, 'src/pages/chain/index.html')

}

},

// 构建目录自动清除

emptyOutDir: false,

},

plugins: [vue()]

}

})

 3、运行地址：

http://127.0.0.1:5173/pages/index/index.html

http://127.0.0.1:5173/pages/chain/index.html

精彩文章

 您阅读本篇文章共花了：