最近一个项目是用vue+vite进行开发的多页应用,此次主要和大家分享一下vite配置
,导出目录
,目录优化
,其他出来
主要目录如下
src下有一个index和一个detail文件夹,分别存在给自的html页面,html页面内容就和默认创建时一样。
基本就是将单页应用src中的html,app.vue,main.js等再复制一遍,原则上相当于直接创建两个单页项目吧。
vite配置
vite配置如下:
主要就是input处要设置一下
import vue from "@vitejs/plugin-vue"
import styleImport from "vite-plugin-style-import"
import { defineConfig } from "vite"
const path = require("path")
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname,'./src'),
},
},
base:
// https://quick.39.net/service/hospitalrank
process.env.NODE_ENV === "production"? "./": "",
build: {
assetsDir: "./assets",
rollupOptions: {
input: {
rank: path.resolve(__dirname, "src/index/index.html"),
detail: path.resolve(__dirname, "src/detail/index.html"),
}
},
},
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: "vant",
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style`,
},
],
}),
]
})
然后运行项目,发现直接输入http://localhost:3000/
是访问不到项目资源的
需输入http://localhost:3000/src/index/index.html
想直接输入地址http://localhost:3000/
访问则需要配置一下root,此次主要是针对导出目录及编写脚本改变目录,root这块不做过多累述,有兴趣的朋友可以看下这位博主的文章
导出目录
若不做处理直接导出,则目录如下
若将项目上线,则需要用如下方式访问页面
https://相关域名/src/index/index.html
或
https://相关域名/src/detail/index.html
苍天啊!!!想死的心都有了系不系!!!真的是恶心
这种页面也可以访问,可我要的是这样的
https://相关域名/index.html
https://相关域名/detail.html
之前没做过多页面配置,而且用的基本都是webpack,没怎么用过rollup,所以感觉是用相关配置可以直接更改这个路径的。可找了大半天基本无果(所以不努力找找,怎么知道自己在白费功夫呢),所以打算自己用node写个脚本对其进行优化
目录优化
在vite.config.js同级目录创建move_html.js
此次脚本的目的是希望打包出来的dist文件夹目录结构能发生如下变化
基本思路就是将
dist/src/detail/index.html
和dist/src/index/index.html
两个文件拷贝到dist
目录,接着删除src
目录
接下来就一步到位
// 移动html脚本
const fs = require('fs')
// 查看src下的所有目录
const dirNames = fs.readdirSync('./dist/src')
// copy
for(let i = 0;i < dirNames.length;i++){
fs.copyFileSync(`./dist/src/${dirNames[i]}/index.html`, `./dist/${dirNames[i]}.html`)
}
fs.rmdirSync('./dist/src',{recursive:true})
额。。虽然代码简短,还是给没用过node的小伙伴简单解释下吧
-
fs.readdirSync('./dist/src')
这条语句会返回一个'dist/src'下的目录数组,像咱们这个目录则是输出如下结果[ 'detail', 'index' ]
-
循环之后利用
copyFileSync
将数组拷贝出来到指定位置,第一个参数是资源位置,第二个参数是目标位置 -
最后调用fs.rmdirSync删除'dist/src的所有目录'
最后在package.json文件中配置一下
"scripts": {
"dev": "vite",
"build": "vite build && node move_html.js",
"serve": "vite preview"
},
此时执行npm run build即可完成理想的打包情况了
简单的事例已经放在git上了,github.com/windeyes/so… a.js就可以看到效果
其他处理
在页面开发中若需要从index页面跳转到detail页面时可以设置一个url,然后window.open调用
const url = '../detail/index.html'
window.open(url,'_self')
但是这样发布上线会有问题,以为我们已经将两个文件移到同一个目录了,此时需要借助process.env.NODE_ENV
进行处理,为production时即为生产环境,否则为开发环境
故
const baseurl = process.env.NODE_ENV==='production'?`./detail.html: `../detail/index.html`
window.open(url,'_self')