vue-cli单页应用改成多页应用配置详解

Vue-cli单页应用改成多页应用配置详解 Vue-cli单页应用改成多页应用配置详解是指将 Vue-cli 初始化的单页应用程序转换为多页应用程序的配置过程。本文将详细介绍该过程，并提供了相应的技术栈和代码实现。 技术栈 1. Vue：2.0.1 2. Vue-resource：1.0.3 3. Vue-router：2.0.0 4. Webpack：1.13.2 5. Gulp：3.9.1 6. ES6 改造前的目录结构 在改造之前，单页应用程序的目录结构如下： * build * config * node_modules * src * static * test * index.html * package.json 改造后的目录结构 在改造之后，多页应用程序的目录结构如下： * build * config * node_modules * src * static * test * index.html * page1 + index.html + main.js * page2 + index.html + main.js * package.json 改造过程 改造过程主要涉及到以下几个方面： 1. 修改build/utils.js文件，以便提取样式到单独的CSS文件中，而不是打包到JS文件或使用style标签插入在head标签中。 2. 在build/webpack.dev.conf.js文件中添加多入口点，以便生成多个HTML文件。 3. 在src目录下创建多个页面目录，每个目录下包含index.html和main.js文件。 4. 在main.js文件中使用Vue-router来实现多页应用程序的路由。 结论 通过本文，我们可以了解到将Vue-cli单页应用程序转换为多页应用程序的详细配置过程。这种转换可以使我们的应用程序更加灵活和可扩展。同时，本文也提供了相应的技术栈和代码实现，以便读者可以更好地理解和实践。