vue脚手架只是开发过程中,协助开发的工具,当真正开发完了 => 脚手架不参与上线
参与上线的是 => 打包后的源代码
打包:
-
将多个文件压缩合并成一个文件
-
语法降级
-
less sass ts 语法解析, 解析成css
-
....
打包后,可以生成,浏览器能够直接运行的网页 => 就是需要上线的源码!
打包命令
vue脚手架工具已经提供了打包命令,直接使用即可。
yarn build
在项目的根目录会自动创建一个文件夹dist
,dist中的文件就是打包后的文件,只需要放到服务器中即可。
配置publicPath
module.exports = { // 设置获取.js,.css文件时,是以相对地址为基准的。 // https://cli.vuejs.org/zh/config/#publicpath publicPath: './' }
路由懒加载
路由懒加载 & 异步组件, 不会一上来就将所有的组件都加载,而是访问到对应的路由了,才加载解析这个路由对应的所有组件
官网链接:路由懒加载 | Vue Router
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
const Detail = () => import('@/views/detail') const Register = () => import('@/views/register') const Login = () => import('@/views/login') const Article = () => import('@/views/article') const Collect = () => import('@/views/collect') const Like = () => import('@/views/like') const User = () => import('@/views/user')
PS: 如果想要手机上看到效果,可以将打包后的代码,上传到 gitee,利用 git pages 进行展示