62 - 综合案例 - 智慧商城-14 - 打包

一. 打包发布

1. 目标: 明确打包的作用

说明: vue脚手架只是开发过程中,协助开发的工具,当真正开发完了 =>脚手架不参与上线

打包的作用:
        ①. 将多个文件缩合并成一个文件
        ②. 语法降级
        ③. less sassts 语法解析
        ④. ...


打包后,可以生成,浏览器能够直接运行的网页 =>就是需要上线的源码!

2. 目标: 打包命令 和 配置

说明: vue脚手架工具已经提供了打包命令,直接使用即可。

命令: yarn build

结果 :在项目的根目录会自动创建一个文件夹 'dist', dist中的文件就是打包后的文件,只需要放到服务器中即可。

配置:默认情况下,需要放到服务器根目录打开,如果希望双击运行,需要配置publicPath 配成相对路径

  

3. 打包流程
        (1). 安装 yarn
npm install -g yarn
        (2). 配置yarn 环境变量
# 1. 黑窗口查找 yarn
where yarn 

# 2. 配置环境变量
C:\Users\Dell\AppData\Roaming\npm
       (3). 增加publicPath配置

               vue.config.js

// 增加publicPath配置,将项目路径改为相对路径
// 否则项目就是绝对路径
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './', 
  transpileDependencies: true
})
        (4). 黑窗口执行打包命令
# 黑窗口中进入项目根目录,执行打包命令
# 因为PowerShell 脚本的执行有着严格的安全策略限制,在vcode中执行打包命令可能会报错
     yarn build
        (5). 自动生成dist目录

                直接在浏览器就可以运行,放到服务器也是只放这一个目录内容

二. 打包优化: 路由懒加载

目标:配置路由懒加载,实现打包优化
说明:当打包构建应用时,Javascript 包会变得非常大影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由
被访问的时候才加载对应组件,这样就更加高效了。

官方链接: 路由懒加载 | Vue Router

1. 步骤一: 异步组件改造
const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
...
2. 步骤二: 路由中应用
const router = new VueRouter({
    routes: [
        ...
        { path: '/prodetail/:id', component: ProDetail },
        { path: '/pay', component: Pay },
        ...
    ]
})
3. 代码示例

          router / index.js

        优化后再打包就会将页面分模块化,加载时会按需加载,提升性能

import Vue from 'vue'
import VueRouter from 'vue-router'

import Layout from '@/views/layout'
import Home from '@/views/layout/home'
import Caregory from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'
import store from '@/store'



// import Login from '@/views/login/index.vue'
// 直接导入login文件,会自动找到index.vue
const Login = () => import('@/views/login')
const Search = () => import('@/views/search')
const SearchList = () => import('@/views/search/list')
const ProDetail = () => import('@/views/prodetail')
const Pay = () => import('@/views/pay')
const MyOrder = () => import('@/views/myorder')

Vue.use(VueRouter)

...

export default router

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值