【vite+vue3】 多页面应用模式

需要注意到的点:

1. 项目文件结构

2. vite.config.js 的配置

3. 访问地址的路径


假设你有下面这样的项目文件结构

├── package.json
├── vite.config.js
├── index.html
├── main.ts
└── src
    ├── project
        |————projectA
            |————api 
            |————router 
            |————views 
            |————index.html 
            |————main.ts
            |————app.vue  
        |————projectB  
            |————api 
            |————router 
            |————views 
            |————index.html 
            |————main.ts
            |————app.vue 
    └── views

在开发过程中,简单地导航或链接到 src/project/projectA/index.html - 将会按预期工作,与正常的静态文件服务器表现一致。


vite.config.js 文件如下:

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'


// 当前执行node命令时文件夹的地址(工作目录)
const root = process.cwd()

export default defineConfig({
  base: './',
  root: root,
  build: {
    target: 'modules',
    minify: 'terser',
    outDir: env.VITE_OUT_DIR || 'dist',
    assetsDir: 'static', //指定生成静态文件目录
    rollupOptions: { // 配置多页面应用模式
      input: {
        input: {
          portalProject: path.resolve(__dirname, 'src/project/portalProject/index.html'),
          riskProject: path.resolve(__dirname, 'src/project/riskProject/index.html'),
        }
      },
      output: { // build 输出
          entryFileNames: 'static/js/[name]-[hash].js',
          chunkFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/name-[hash].[ext]',
        }
    },
  },
})

如果你指定了另一个根目录,请记住,在解析输入路径时,__dirname 的值将仍然是 vite.config.js 文件所在的目录。因此,你需要把对应入口文件的 root 的路径添加到 resolve 的参数中。


在package.json中打包或者启动命令如下:

npm run dev 即可。

访问地址变为localhost/src/project/portalProject/index.html

localhost/src/project/riskProject/index.html

当执行npm run build 时生成的目录如下:

【vite+vue3】 多页面应用模式_第1张图片


 注意⚠️在运维部署时,访问该html,需要多写点路径才能正常访问

你可能感兴趣的:(vue,vite,vue3)