vue-cli配置多页面应用

Posted 2023-03-04

参考技术A vue脚手架创建的应用默认都是单页面的SPA，若需要开发多页面应用，需要自己手动配置。其实本质上就是将默认生成的这些文件(index.html、main.js、App.vue)当作一个页面，复制一份改改名字和基本内容作为另一个页面。

1、方便管理 在src新建pages目录 然后pages下建各个页面对应的文件夹 如：

1、首先将封装的方法放在 build/utils.js 文件中

2、在webpack.base.conf.js中通过方法获取入口文件

3、修改开发和打包环境的配置文件，在plugins数组后使用concat拼接HtmlWebpackPlugin插件的配置

脚手架3配置多页面 和脚手架2差不多文件夹分类同脚手架2，只是脚手架3以上将配置文件隐藏起来了，步骤稍微不同
项目根目录新建vue.config.js文件，将配置放置于此文件中

也是通过封装的函数方法自动获取对应文件夹下的文件 作为入口文件