MENU

Vue-lic3.0 Vue3 Vite2 多页面结构

• February 17, 2022 • 默认分类 • 阅读设置

百度了半天，没找到方法，最后还是在Vite官方文档找到了方法
目录结构：

├─about
│  ├─App.vue
│  └─main.js
├─node_modules
│  └─...
├─others
│  └─links
│      ├─App.vue
│      └─main.js
├─pages
│  ├─App.vue
│  ├─index.html
│  └─page.js
├─public
│  └─...
├─src
│   ├─assets
│   ├─components
│   ├─App.vue
│   └─main.js
├─about.html
├─index.html
├─links.html
├─package.json
├─vite.config.js
├─pnpm-lock.yaml

目录文件结构大概就是这样，主要还是vite.config.js和.html的配置
vite.config.js如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const { resolve } = require('path')

module.exports = defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 主要是这里，引入.html的位置，用于build
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        page: resolve(__dirname, 'pages/index.html'),
        about: resolve(__dirname, 'about.html'),
        links: resolve(__dirname, 'links.html'),
      }
    }
  }
})

pages/index.html的文件如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App666</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/pages/page.js"></script>
<!-- 引入的page.js文件就在pages目录下 -->
  </body>
</html>

page.js引入.vue文件

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

vue文件内容

<template>
  <div>
    App pages!
  </div>
</template>

其他的about和links文件一样，只是js和vue存放在文件夹下，about的js和vue文件在about文件夹下，links的js和vue文件在others中links的文件夹下
build后的文件目录如下

│  1.txt
│  about.html
│  favicon.ico
│  index.html
│  links.html
│  
├─assets
│      about.bc937ba2.js
│      links.b8927572.js
│      logo.03d6d6da.png
│      main.36fbf8cb.css
│      main.df2033de.js
│      page.b3575ca2.js
│      plugin-vue_export-helper.ddefbfc0.js
│      vendor.400c37bc.css
│      vendor.b0d5a4fa.js
│      
└─pages
        index.html
Leave a Comment