修改预告
警告:本结构可能存在打包不成功或者是静态资源缺失问题,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安装与多页面改造
文件根目录与src目录构造是这样:
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完全可以一样模板