前端开发者前端开发之走进vue.js|前端开发 vue.js |vuejs2前端开发|web前端开发
多页面的知乎日报就是按页面来写，这次是用组件形式写的，也就是先写组件再写页面，那么就需要解决一个问题，vue-cli默认是只有一个index.html的主页的。我们需要自己改配置文件，让其自动根据我们有一个页面编译后输出几个页面。
1.修改配置，支持多页面开发
1.首先找到config里面的webpack.base.conf.js文件。在里面加入下面的代码。
javascript 代码
var glob = require(“glob”);
function getEntry(globPath) {
varentries={},
basename,
tmp,
pathname;
glob.sync(globPath).forEach(function(entry){
basename=path.basename(entry,path.extname(entry));
tmp=entry.split(“/”).splice(-3);
pathname=tmp.splice(0,1) +”/”+basename;// 正确输出js和html的路径
entries[pathname] =entry;
});
console.log(“base-entrys:”);
console.log(entries);
returnentries;
}
2.找到webpack.dev.conf.js,同样在里面加入下面的代码。javascript 代码
var path = require(“path”);
var glob = require(“glob”);
var pages = getEntry(“./src/module/**/*.html”);
console.log(“dev pages———————-“);
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
varconf={
filename: pathname + “.html”,
template: pages[pathname], // 模板路径
minify: {
//传递 html-minifier 选项给 minify 输出
removeComments: true
},
inject: “body”, // js插入位置
chunks: [pathname, “vendor”, “manifest”] // 每个html引用的js模块，也可以在这里加上vendor等公用模块
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(newHtmlWebpackPlugin(conf));
}
function getEntry(globPath) {
varentries={},
basename,
tmp,
pathname;
glob.sync(globPath).forEach(function(entry){
basename=path.basename(entry,path.extname(entry));
tmp=entry.split(“/”).splice(-3);
pathname=tmp.splice(0,1) +”/”+basename;// 正确输出js和html的路径
entries[pathname] =entry;
});
console.log(“dev-entrys:”);
console.log(entries);
returnentries;
}
注意要去掉之前这个文件里面默认的输出
javascript 代码
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true
}),
3.找到webpack.prod.conf.js，执行第二步相同的操作。
三部操作之后你就能按页面开发了。
2.修改文件夹
接下来就是对文件夹的修改。将src里面的文件层级修改为下面所示的。
我们新建一个module文件夹，然后按照页面来新建文件夹，比如index下面有index.html,app.vue,index.js(html和js的命名必须要一样哦)，这样webpack在我们之前配置的代码下就能自己通过每一个文件夹下面的js编译出不同的页面了。
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册