vue.config.js中的webpack配置，优化及多页面应用开发
目录
官方文档
vue-cli3以下版本中，关于webpack的一些配置都在config目录文件中，可是vue-cli3以上版本中，没有了config目录，那该怎么配置webpack呢？
3.x初始化项目后没有了build和config文件，如果你想对webpack相关内容进行配置，需要自己在根目录下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。(但需要我们自己手动创建哦vue.config.js，跟package.json同级)
在配置中绝大多数都是（可选项）
常规操作还是用到了commjs语法
部署应用包的基本Url，默认/, 可以设置为相对路径./,这样打出来的包，可以部署到任意路径上
输出文件目录（打包后生成的目录，默认dist）
打包后生成的静态资源目录，默认“ ” ，也就是我们打包后的css，js等存放的位置
是否在保存的时候检查
生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认值是true
可通过 devServer.proxy解决前后端跨域问题（反向代理）
扩展： hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
扩展：
Preload： 用于标记页面加载后即将用到的资源，浏览器将在主体渲染前加载preload标记文件。Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示；
Prefetch: 用于标记浏览器在页面加载完成后，利用空闲时间预加载的内容。Vue CLI 应用默认为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示。
webpack配置
扩展:
在这里configureWebpack和chainWebpack的作用相同，唯一的区别就是他们修改webpack配置的方式不同：
这里配置了全局sass 需要安装的依赖 sass-loader less-loader
由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同
vue-cli3中的webpack与vue多页面应用开发
相关参数:
封装
很好的pwa插件相关配置
pwa介绍及使用
当运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js;
上面已经提到过去掉打印的操作（console、debug）这里详细讲解一下
新版uglifyjs-webpack-plugin需写成以下方式
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。
和我们正常创建项目相同，这里通过vue-cli3脚手架进行创建
vue-cli配置多页面应用
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文件，将配置放置于此文件中
也是通过封装的函数方法自动获取对应文件夹下的文件 作为入口文件
Vue多页面应用配置
最近由于工作驱动，项目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,为了减少维护的成本，决定使用Vue的多页面开发。
项目线上部署在一个子目录下，为了解决在本地和线上路径保持一致，需要修改一些配置。所以以此篇文章来记录一下配置过程中的问题。
这里是我放在github上的项目，里面有整个配置文件。感兴趣的朋友可以参考一下： vue-multiple-page
此篇文章记录了先在根路径下的多页面配置，再从根路径修改成子路径的配置
vue脚手架vue-cli3及以上；
在本地用vue-cli新建一个项目；
vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')
vue3.js :路由配置修改的是 history: createWebHistory('/e/')
mobile端mobile.js的base修改成 base: '/e/mobile'
vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')
特别注意的地方
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
