基于Vue项目打包上线配置

打包上线

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

build之前

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

//main.js
axios.defaults.baseURL = 'http://localhost:3000'

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

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

build

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

懒加载

为什么要进行懒加载 ?

性能优化 - 首屏加载速度

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

//router/index.js
import 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. 把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

//router/index.js
import 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')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247937.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NSTimer 进阶使用总结与注意事项

NSTimer 是 iOS 上的一种计时器,通过 NSTimer 对象,可以指定时间间隔,向一个对象发送消息。NSTimer 是比较常用的工具,比如用来定时更新界面,定时发送请求等等。但是在使用过程中,有很多需要注意的地方&…

一步一步教你实现iOS音频频谱动画(一)

如果你想先看看最终效果再决定看不看文章 -> bilibili示例代码下载 第二篇:一步一步教你实现iOS音频频谱动画(二) 基于篇幅考虑,本次教程分为两篇文章,本篇文章主要讲述音频播放和频谱数据的获取,下篇将…

微信小程序的基础 (一)

微信小程序介绍- 链接 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用 1. 为什么是微信小程序? 微信有海量用户,而且粘性很高&#x…

看YYModel源码的一些收获

关于源码学习自己的一些感悟第一层:熟练使用;第二层:读懂代码;第三层:通晓原理;第四层:如何设计;自己学到了什么,还留有什么问题;关于分享关于线下演讲分享和…

IDEA提交项目到SVN

一.提交步骤 VCS--Enable...-->点击项目右键-->subversion-->share directory-->commit 二.IDEA SVN 忽略文件的设置 1》share .使用idea在将项目提交到svn的过程中遇到这样的问题 将项目share之后再设置ignore files ,在commit的时候,不会将…

小程序基础 (二)

小程序开发框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。 小程序提供了自己的视…

项目ITP(五) spring4.0 整合 Quartz 实现任务调度

版权声明:本文为博主原创文章,未经博主同意不得转载。https://blog.csdn.net/u010378410/article/details/26016025 2014-05-16 22:51 by Jeff Li 前言 系列文章:[传送门] 项目需求: 二维码推送到一体机上,给学生签到扫…

喜欢用Block的值得注意-Block的Retain Cycle的解决方法

本文不讲block如何声明及使用,只讲block在使用过程中暂时遇到及带来的隐性危险。 主要基于两点进行演示: 1.block 的循环引用(retain cycle) 2.去除block产生的告警时,需注意问题。 有一次,朋友问我当一个对象中的block块中的访问…

小程序基础 (三)

5. 使用 slot 使用单个slot // 页面 <Test><view>自定义内容</view> </Test>// 组件 <view><view>前面的内容</view><slot></slot><view>后面的内容</view> </view>使用多个slot - 具名 // 页面 &…

【PyQt5】QT designer + eclipse 集成开发

【写在前面的话】 考虑将pyqt5的界面开发qt designer 集成在eclipse中&#xff0c;并且&#xff0c;不利用cmd命令行进行转换。 【工具】 1、pyqt5 2、qt designer 3、eclipse pydy 【步骤】 1、首先配置Qt designer。 菜单 run-->external Tools-->External tools confi…

iOS UIlabel文字排版(改变字间距行间距)分类

在iOS开发中经常会用到UIlabel来展示一些文字性的内容&#xff0c;但是默认的文字排版会觉得有些挤&#xff0c;为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节。 比如一个Label的默认间距效果是这样&#xff1a; 然后用一个封装起来的Cat…

MySQL查询之聚合查询

为了快速得到统计数据&#xff0c;提供了5个聚合函数&#xff1a; count(*)表示计算总行数&#xff0c;括号中写星与列名&#xff0c;结果是相同的 查询学生总数 select count(*) from students; max(列)表示求此列的最大值 查询女生的编号最大值 select max(id) from students…

React基础学习(第一天)

React 概述 : React 是一个用于 构建用户界面 的 JavaScript 库因为框架是有一整套解决方案的&#xff0c;React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux结合起来才叫框架&#xff0c;而React本身只是充当一个前端…

iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

问题一 开发过程中&#xff0c;经常会遇到动态计算行高的问题&#xff0c; - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingC…

day24 01 初识继承

day24 01 初识继承 面向对象的三大特性&#xff1a;继承&#xff0c;多态&#xff0c;封装 一、继承的概念 继承&#xff1a;是一种创建新类的方式&#xff0c;新建的类可以继承一个或者多个父类&#xff0c;父类又可称基类或超类&#xff0c;新建的类称为派生类或者子类 class…

React基础学习(第二天)

虚拟DOM JSX 涉及到 虚拟DOM ,简单聊一下 定时器渲染问题 // 方法 function render() {//2. 创建react对象let el (<div><h3>时间更新</h3><p>{ new Date().toLocaleTimeString()}</p></div>)//3. 渲染ReactDOM.render(el, document.g…

iOS 去除字符串中的空格或多余空格(适合英文单词)

NSString -stringByTrimmingCharactersInSet: 是个你需要牢牢记住的方法。它经常会传入 NSCharacterSet whitespaceCharacterSet 或 whitespaceAndNewlineCharacterSet 来删除输入字符串的头尾的空白符号。 需要重点注意的是&#xff0c;这个方法 仅仅 去除了 开头 和 结尾 的…

华为交换机在Telnet登录下自动显示接口信息

因为用console连接交换机&#xff0c;默认是自动显示接口信息的&#xff0c;比如down掉一个接口后&#xff0c;会自动弹出接口被down掉的信息&#xff0c;但是在telnet连接下&#xff0c;默认是不显示这些信息的&#xff0c;需要开启后才可显示。 1、首先开启info-center(默认是…

React基础学习(第三天)

条件渲染 1. if / else render () {if (this.state.isLoading) { // 正在加载中return <h1>Loading...</h1>}return <div>这就是我们想要的内容</div>} // 钩子函数 五秒钟之后 修改状态值componentDidMount () { setTimeout(() > {this.setState(…

componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

将string字符串转换为array数组 NSArray *array [Str componentsSeparatedByString:","]; &#xff1d;&#xff1d;反向方法 将array数组转换为string字符串 NSString *tempString [mutableArray componentsJoinedByString:","];--,是分隔符 可不加分隔…