详解如何使用 vue-cli 开发多页应用

发布时间：2020-12-17 02:40:26 所属栏目：百科来源：网络整理

导读：本文介绍了如何使用 vue-cli 开发多页应用，分享给大家，具体如下：修改的webpack配置文件全局配置修改 webpack.base.conf.js 打开 ~buildwebpack.base.conf.js ，找到entry，添加多入口运行、编译的时候每一个入口都会对应一个 Chunk run dev 开发环

本文介绍了如何使用 vue-cli 开发多页应用，分享给大家，具体如下：

修改的webpack配置文件

全局配置

修改 webpack.base.conf.js

打开 ~buildwebpack.base.conf.js ，找到entry，添加多入口

运行、编译的时候每一个入口都会对应一个Chunk

run dev 开发环境

修改 webpack.dev.conf.js

打开 ~buildwebpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

chunks: ['app']中的app对应的是webpack.base.conf.js中entry设置的入口文件

run build 编译

修改 config/index.js

打开~configindex.js，找到build下的index: path.resolve(__dirname,'../dist/index.html')，在其后添加多页

修改 webpack.prod.conf.js

打开~buildwebpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中对应的 build

如果页面比较多，可以考虑使用循环将 HtmlWebpackPlugin 添加到 plugins

for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry,extname);
pathname = path.join(dirname,basename);
pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir),'') : pathname;
entries[pathname] = ['./' + entry];
}
return entries;
}

同样入口 entry 也可以使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!