vue单页面改造多页面应用详解
更新时间：2022年06月26日 10:03:57 作者：web老猴子
本文主要介绍了vue单页面改造多页面应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
= {
entry: `src/pages/${page}/main.js`, // page 的入口
template: `public/index.html`, // 模板来源
filename: `${page}.html`, // 在 dist/index.html 的输出
}
}
const page = process.argv[3] || 'index'
// 如果是 开发环境，运行阶段
if (!isProduction) {
for (const page of buildEntries) {
initPageParams(page)
}
} else {
// 只有在生产打包的时候，单独打包，拆成不用的文件夹
initPageParams(page)
}
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: isProduction ? page : 'static',
productionSourceMap: false,
pages: modules,
devServer: {
port: 8080
},
lintOnSave: false
}
这时候我们npm run build:index 尝试查看打包结果，可以看到，可以将index对应的文件全部放在index文件目录下，如果我们需要打包home，直接npm run build:home
File Size Gzipped dist\index\js\chunk-vendors.c60bfe2f.j 1837.82 KiB 527.87 KiB s dist\index\js\index.e2aa144d.js 11.28 KiB 4.12 KiB dist\index\js\about.2a86a3cb.js 0.43 KiB 0.28 KiB dist\index\css\chunk-vendors.ef376986. 456.88 KiB 55.99 KiB css dist\index\css\index.5dfa7415.css 0.45 KiB 0.28 KiB Images and other types of assets omitted. Build at: 2022-05-03T03:46:54.824Z - Hash: e2d53105a245deab - Time: 12711ms DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
现在我们已经实现了，单独page单独打包，但我们如果想，一个命令打包所有的page呢。这个时候我们就需要node一个方法来帮助我们实现了 我们在单独建一个js文件代码如下
const fs = require('fs');
const execSync = require('child_process').execSync;
const { buildEntries } = require('../config/getPages');
// 移除目录
function deleteDist(path) {
let files = [];
// 判断目录是否存在
if (fs.existsSync(path)) {
files = fs.readdirSync(path); // 读取目录
// @ts-ignore
files.forEach((file) => {
const curPath = path + '/' + file; // 拼接目录写文件完整路径
if (fs.statSync(curPath).isDirectory()) { // 读取文件路径状态 判断是否为文件夹 如果为文件夹，递归
deleteDist(curPath);
} else {
fs.unlinkSync(curPath); // 删除文件
}
});
fs.rmdirSync(path);
}
}
try {
const startTime = Date.now();
process.env.NODE_ENV = 'production'; // 切换环境为生产
// 执行打包前删除dist目录
deleteDist('./dist');
for (const page of buildEntries) {
// 可以执行我们的命令,第一个参数是命令,第二个参数的意思是输出子进程中的日志
execSync(`vue-cli-service build ${page} --no-clean`, { stdio: 'inherit' });
}
// 重置
process.env.NODE_ENV = undefined;
const time = Date.now() - startTime;
console.log('\033[42;30m ALL DONE \033[0m Build Compiled successfully in ' + `${time / 1000}s`);
} catch (e) {
console.log('\033[41;30m FAILED \033[0m ' + e);
}
思想就是循环执行打包命令 关键在于execSync方法来替我们执行打包命令,现在我们执行,npm run _build
至此我们的多页面打包基本完成，后续也可以做一些cdn的处理，或者chunks的拆包等优化。小伙伴们自行研究
到此这篇关于vue单页面改造多页面应用详解的文章就介绍到这了,更多相关vue单页面改造多页面 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
最新评论