vite+vue3搭建多应用分包

背景

使用vue的小伙伴都知道vue是单页面应用，也就是俗称的spa，但是这种单页面应用不利于我们的seo搜索，那这个时候如果为了让我们更好的被搜索到，除了利用百度搜录 ，谷歌搜录意外还可以对其进行应用分包，这样更容易被搜索到，那么怎么多多应用分包呢？下面我将分部给大家讲解。

请自行创建一个vue项目。

根目录创建pages文件

然后再pages文件中创建多个pageone/pagetwo等文件

创建文件

typescript 复制代码

// pages/pageone
// pages/pageone/main.ts
// pages/pageone/index.html
// pages/pageone/App.vue

1、main.ts

typescript 复制代码

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

2、index.html

typescript 复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + 455</title>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script>
    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_27918_438.b385c4813e6d6afdb651323bdfa46be7.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

3、App.vue

typescript 复制代码

<script setup lang="ts"></script>
<template>
  <div id="app">789</div>
</template>

<style lang="less">
#app {
  width: 100%;
  height: 100%;
}
</style>

4、访问地址

这个时候我们去访问本地地址的时候，您会发现打不开，并且还不打了包。这是因为你需要配置vite.config.ts文件

typescript 复制代码

http://localhost:8080/pageone/index.html

5、vite.config.ts配置

在这儿最重要的是注意多页面配置文件，如果您是想单独打包摸个页面的话就去配置一下环境变量（或者写死也行），如果都是全部打包的话就直接在下面的代码中修改一下就行filterProjects ；我们可以看到一下代码中有一个引入多页面配置文件multiPages.json

typescript 复制代码

import { defineConfig, splitVendorChunkPlugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteCompression from 'vite-plugin-compression';
import viteImagemin from 'vite-plugin-imagemin';
import vueJsx from '@vitejs/plugin-vue-jsx';
// 配置@别名
import { resolve } from 'path';

// 引入多页面配置文件
const project = require('./multiPages.json');
// 获取npm run dev后缀 配置的环境变量
const npm_config_page = process.env.npm_config_page || '';

let filterProjects = [];
if (npm_config_page) {
  //如果指定了单页面打包，过滤出这个页面的配置项
  filterProjects = project.filter((ele: any) => {
    return ele.chunk.toLowerCase() === npm_config_page.toLowerCase();
  });
  // console.log(`--------单独构建：${filterProjects[0]['chunkName']}--------`);
} else {
  filterProjects = project;
  // console.log(`--------全部构建：${filterProjects[0]['chunkName']}--------`);
}

const getEntryPath = (p: any): any => {
  const pages: any = {};
  p.forEach((ele: any) => {
    const htmlUrl = resolve(__dirname, `src/pages/${ele.chunk}/index.html`);
    pages[ele.chunk] = htmlUrl;
  });
  return pages;
};

// console.log('filterProjects', getEntryPath(filterProjects));

// https://vitejs.dev/config/
export default defineConfig({
  root: './src/pages/',
  plugins: [
    vue(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    vueJsx(),
    splitVendorChunkPlugin(),
  ],
  resolve: {
    alias: {
      '@': '/src',
      '@pages': resolve(__dirname, './src/pages'),
      '@components': resolve(__dirname, './src/components'),
    },
  },
  build: {
    outDir: resolve(__dirname, 'dist'), // 指定输出路径
    chunkSizeWarningLimit: 1500,
    sourcemap: false, // 是否生成 source map
    emptyOutDir: true, //Vite 会在构建时清空该目录
    // 打包时清楚console和debugger
    terserOptions: {
      compress: {
        keep_infinity: true,
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      input: getEntryPath(filterProjects),
      output: {
        compact: true, //压缩代码，删除换行符等
        assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件输出的文件夹名称
        chunkFileNames: 'js/[name]-[hash].js', //chunk包输出的文件夹名称
        entryFileNames: 'js/[name]-[hash].js', //入口文件输出的文件夹名称
      },
    },
  },
});

6、multiPages.json

在根目录创建该文件（您也可以在外面包一层文件都是可以的，不是必须按照我这样）

typescript 复制代码

[
  {
    "chunk": "pageone",
    "chunkName": "测试页面1"
  },
  {
    "chunk": "pagetwo",
    "chunkName": "测试页面2"
  }
]

当你配置到这儿的时候，恭喜您，您可以根据本地地址进行访问了 **http://localhost:8080/pageone/index.html**，开心吧！

备注：您这个时候会想，我现在是能访问了但是，我不能像单应用那样开发访问，请问这种又是怎么弄呢？不急不急，我们继续来。

7、router文件配置

在pageone文件夹下新增文件。

typescript 复制代码

// router
// router/index.ts
// test.vue

8、index.ts路由配置

typescript 复制代码

import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
  history: createWebHashHistory(), //可传参数，配置base路径，例如'/app'
  routes: [
    {
      path: '/test',
      name: 'default',
      component: () => import('@pages/pageone/test.vue'), //路由懒加载
    },
  ],
});
export default router;

9、test.vue

typescript 复制代码

<template>
  <div>测试</div>
</template>

10、修改App.vue

typescript 复制代码

<script setup lang="ts"></script>
<template>
  <div id="app">
    789
    <router-view />
  </div>
</template>

<style lang="less">
#app {
  width: 100%;
  height: 100%;
}
</style>

11、修改main.ts

javascript 复制代码

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

现在我们在这样去访问该地址**http://localhost:8080/pagetwo/#/test**就可以展示出我们在test文件中的的内容了。

到这儿就结束了。

总结

说万遍，看万遍，不如自己走一遍。

最近打算创建一个群，在里面大家可以一起讨论技术，也可以内推工作，也可以讨论创业想法，如果能找到志同道合的人，可以组建自己的梦想团队，不居于形式。如果想加入的可以跟我沟通，我也会分享一些我原来做过的项目，虽然目前没有很好的效果；我看看谁是第一个加入的小伙伴。