如何使用vue-cli开发多页应用方法

全局配置

修改 webpack.base.conf.js

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

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

run dev 开发环境

修改 webpack.dev.conf.js

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

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

run build 编译

修改 config/index.js

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

修改 webpack.prod.conf.js

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

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

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

同样入口 entry 也可以使用

相关推荐：

vue-cli快速构建vue应用并实现webpack打包详解

vue-cli中自定义路径别名 assets和static文件夹的区别

总结关于Vue-cli的相关实例

以上就是如何使用 vue-cli 开发多页应用方法的详细内容，更多请关注Gxl网其它相关文章！