失眠网 > 基于Vue项目打包上线配置

基于Vue项目打包上线配置

时间：2022-09-29 18:14:13

相关推荐

基于Vue项目打包上线配置

打包上线

开发阶段 :npm run serve发布阶段 :npm run build

build之前

1. 把基准地址, 由开发阶段的换成发布阶段的

//main.jsaxios.defaults.baseURL = 'http://localhost:3000'

2. 忽略项目中打印的结果

// main.jsconsole.log = () => {}// 开发阶段 => 注释掉 => 让后面的log 可以使用// 发布阶段 => 释放注释 => log重写 => 后面的log 都不会打印

build

运行npm run build打一个包出来 :/dist文件夹把/dist文件夹交给后台即可我们可以自己尝试 :live-server

npm i live-server -g

懒加载

为什么要进行懒加载 ?
性能优化 - 首屏加载速度

1. 把除了首屏的组件外其他组件都处理为`异步组件`, 交给webpack来进行分割 , 需要的时候才加载该模块

//router/index.jsimport Home from '../pages/Home.vue' // home就是首屏不需要参与懒加载const Login = () => import(/* webpackChunkName: "user" */ '../pages/Login.vue')const Register = () =>import(/* webpackChunkName: "user" */ '../pages/Register.vue')const User = () => import(/* webpackChunkName: "user" */ '../pages/User.vue')const Edit = () => import(/* webpackChunkName: "user" */ '../pages/Edit.vue')const MyFollow = () =>import(/* webpackChunkName: "user" */ '../pages/MyFollow.vue')const MyComments = () =>import(/* webpackChunkName: "user" */ '../pages/MyComments.vue')const MyStar = () =>import(/* webpackChunkName: "user" */ '../pages/MyStar.vue')const Test = () => import(/* webpackChunkName: "home" */ '../pages/Test.vue')const Detail = () =>import(/* webpackChunkName: "home" */ '../pages/Detail.vue')const TabEdit = () =>import(/* webpackChunkName: "home" */ '../pages/TabEdit.vue')const Search = () =>import(/* webpackChunkName: "home" */ '../pages/Search.vue')

##2. 把组件按组分块