vue vite 多页面应用与vue cli多页面应用 (MPA)及其比较(避坑)

先生余枫

已于 2024-06-15 18:03:58 修改

阅读量1.5k

点赞数 27

分类专栏： vue.js vue-cli vue-vite 文章标签： vue.js 前端 js

于 2024-03-27 14:46:40 首次发布

本文链接：https://blog.csdn.net/qq_51165365/article/details/137050695

版权

vue.js 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue-cli

1 篇文章 0 订阅

订阅专栏

vue-vite

1 篇文章 0 订阅

订阅专栏

修改预告

警告：本结构可能存在打包不成功或者是静态资源缺失问题，vite打包与部署问题已经解决，

vite项目的打包与IIS部署已经修改，本篇不做修改，本篇文章做旧参考，查看修改文章，请移步这里。

vue3 cli 本人已经放弃，官方已经不再维护，我也就不想学了，不再使用，文章仅作参考，懒得改。vite请移步上面链接

1.vue-vite 安装应用

npm create vite@latest

确定名称后选择vue 语言选择 JS，根据提示进入项目【cd 名称】，然后安装依赖【npm i】

  cd vite_pages
  npm install
  npm run dev

如果有警告版本，检查一下node版本[ node -v ] 因为vite对版本有要求，node -v。最新的vite要求18+或20+，如果不对应，node官网下载更新。再次执行npm install后更新,无警告。

然后npm run dev 启动示例应用，后面改造在vscode下面进行。

2.vue-vite 多页面应用改造

2.1.vite改造多页面

vue-vite默认项目是这样的

很多文章对多页面应用的解释需要对vite.config.js 编译路径root配置,然后配置build的路径。本人对root和修改后的路径不了解，因此怎么也配不对。在阅读下面的文章后，最终修改成功。参考：

真正优雅的vite多页面实战 - 掘金 (juejin.cn)

所以建议不要随便修改root,当然我对打包的配置也还不懂，因此本文章的结构和配置不一定适合打包，有需要后面再次探索打包配置。改造后的文件是所有的HTML放在根目录，在src下面新建pages，如下图左，pages新建文件夹与html一一对应，每个文件一样包含css,js,views三个文件夹和app.vue、main.js，如下图右：

本人在根目录新建了about、index、home、三个页面，src/pages对应有三个文件夹

下面给文件样式index.html，这里的重点就是html的接口文件的引入。这里使用绝路径【/开头】，如果修改了root,我就不太会了就不多说。为了区分，记得修改网页标题

<!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>index</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/pages/index/main.js"></script>
  </body>
</html>

pages/index/App.vue



<template>
  <div>
   登录index页面
  </div>

</template>

pages/index/main.js

import { createApp } from 'vue'
import './css/style.css'
import App from './App.vue'

createApp(App).mount('#app')

样式的话是空的，简单示例，pages下面 main.js如果网页使用了不同插件，会不一样。App.vue都不一样，因为app.vue是自定义网页内容，自己填写，就不多说了。

最后就是vite.config.js说明，什么都没改！9010是自定义端口

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    port:9010,
  },
  plugins: [vue()],
})

因为暂时不需要打包，因此不知道后面怎么配置，但是仅仅多页面应用的似乎不需要配置vite.config.js。

启动服务 npm run dev，vue-vite多页面应用改造完成!

2.2.避坑

1.vite.config.js 不懂root,就不要修改root；

2.html文件接口文件引入：src="/src/pages/index/main.js"

3.不需要额外插件，直接按照这样的结构就可以实现vite多页面应用

4.文件结构很重要，默认的root必须是这样的文件结构。

5.必须默认首页是index.html，因为没有配置第一个入口文件，否则

localhosr:[端口]无法访问

3.vue-cli 安装应用与vue-cli多页面改造

3.1cli 安装应用与多页面改造

这里参考本人另一篇文章。文章有详细介绍cli安装与多页面改造

public目录是这样，也就是放html与网页图标以及自定义文件

src/pages/网页配置都一样，比如src/pages/index/

main.js

//样式
import './css/main.css'
//部署全局jquery
import {$} from 'jquery'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'


createApp(App).use(router).mount('#app')

router.js

import index from './App.vue';
import router from 'vue-router'

const routes = [
  
  { path: '/', component: index },

];

export default new router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

app.vue

<template>
  <div>
   index登录
  </div>
</template>
 
<script  src="./App.js"></script>
<style src="">
</style>

因为vue-cli多页面构造相对vite复杂，因此重点是：

1.安装插件vue-router,注意版本影响本人是下面版本。

npm i vue-router@3.5.2

2.router配置很重要，有些对index配置不太正确

3.vue.config.js配置

const { defineConfig } = require('@vue/cli-service')
const webpack = require("webpack");

//入口文件
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//驼峰语法报错esli
  devServer: {
    client: {
      overlay: false,
    },
  },
  //jquery插件
  configureWebpack: {
    plugins: [
      // 配置jQuery
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      })
    ],
  },
  //多页面配置
  pages: {
    // 先配置主页
    index: {
      entry: 'src/pages/index/main.js',
      template: './public/index.html',
      title: '用户登录',
      filename:'index.html',
    },
    // 登录后首页
    home: {
      entry: 'src/pages/home/main.js',
      template: './public/home.html',
      title: '黔灵山书院大厅',
      filename:'home.html',
    },
    map: {
      entry: 'src/pages/map/main.js',
      template: './public/map.html',
      filename:'map.html',   
    },
    book: {
      entry: 'src/pages/book/main.js',
      template: './public/book.html',
      filename:'book.html',
    },
    talk: {
      entry: 'src/pages/talk/main.js',
      template: './public/talk.html',
      filename:'talk.html',
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: './public/about.html',
      filename:'about.html',
    },
    subject: {
      entry: 'src/pages/subject/main.js',
      template: './public/subject.html',
      filename:'subject.html',
    },
  },
})

3.2避坑

1.vue-router插件版本需求，

2.html自动插入接口文件

3.结构也很重要，public放置html,src/pages/放置网页具体内容。

4.配置很重要，vue.config.js的pages属性必须要求配置好，如上。

5.保证首页是index.html

4.vue cli 、vite两种多页面应用比较，

首先不同点：

1.结构上vue-cli把html放在public下，而vite则放置在根目录下

2.vue-vite必须要引入接口文件，路径有要求，cli自动引入

3.vite不需要使用插件，也不需要配置vite.config.js文件，而vue-cli则需要使用vue-router插件，还需要配置文件router.js和vue.config.js

相同点：

src/pages配置结构，除了router.js完全可以一样模板

先生余枫

关注

27
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue vite 多页面应用与vue cli多页面应用 (MPA)及其比较(避坑)

vue-cli和vite安装默认的应用后，对其进行多页面应用改造，总结vite多页面应用与cli多页面应用的异同点，实际需要和避坑总结。vue vite 多页面应用与vue cli多页面应用 (MPA、SPA)及其比较(避坑)
复制链接

扫一扫