Vue-cli多页面配置指南

"Vue CLI创建项目从单页面到多页面的方法" 在开发过程中，有时单页面应用程序（SPA）无法满足所有项目需求，这时就需要将基于Vue CLI构建的单页面项目转换为多页面应用。以下是一种实现该转换的方法： 1. 安装依赖：首先，我们需要安装`glob`这个包，它能帮助我们处理文件路径和搜索。通过运行以下命令安装： ```bash npm install glob --save-dev ``` 2. 修改`webpack.base.conf.js`：接下来，你需要编辑`build`目录下的`webpack.base.conf.js`文件。引入`glob`库，并创建一个名为`getEntry`的函数，用于获取所有页面的入口JS文件。这一步是关键，因为Vue CLI默认的配置仅针对单页面，所以我们要自定义入口。 ```javascript var glob = require('glob'); function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function(entry) { basename = path.basename(entry, path.extname(entry)); pathname = basename.split("_")[0]; // 例如：index_main.js 得到 index entries[pathname] = entry; }); return entries; } module.exports = { // ... entry: getEntry('./src/pages//*.js'), // 替换原来的 'app: './src/main.js'' }; ``` 3. 修改`webpack.dev.conf.js`：同样地，我们需要修改`webpack.dev.conf.js`文件。这次，我们需要更新`plugins`部分，删除原来的`HtmlWebpackPlugin`配置，然后为每个页面创建一个新的HTML插件实例。 ```javascript // 引入所需库 var glob = require('glob'); var path = require('path'); // ... module.exports = { // ... plugins: [ // ... // 注释或删除原有的 new HtmlWebpackPlugin({ // filename: 'index.html', // template: 'index.html', // inject: true // }), // 添加新的插件实例 ...glob.sync('./src/pages//*.html').map(function(entry) { var name = path.basename(entry, '.html'); return new HtmlWebpackPlugin({ filename: name + '.html', template: entry, inject: true, chunks: [name] }); }) ] }; ``` 以上步骤完成后，Vue CLI的配置将会根据`src/pages`目录下所有的JS文件生成对应的HTML文件和页面入口。每个入口文件（如`index.js`）将与对应的HTML模板（如`index.html`）一起打包，形成独立的页面。这种方法允许你管理和构建多个页面的应用，而不仅仅是单一的入口点。 总结一下，从Vue CLI的单页面项目转换为多页面项目，主要涉及到两个核心步骤：一是通过`glob`获取所有页面入口并替换`webpack.base.conf.js`的`entry`配置；二是更新`webpack.dev.conf.js`的`HtmlWebpackPlugin`配置，为每个页面生成相应的HTML文件。通过这样的配置，你可以灵活地管理你的多页面Vue应用。