基于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')
基于Vue项目打包上线配置相关推荐
- vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记 前端打包 打包的代码如何运行 打包指定不同的环境变量(开发,测试) 打包手动配置文件 打包压缩,大文件处理 gzip进一步压缩 打包app 打包部署模式 vu ...
- vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线,放到服务器上发现js和css引入不到,页面加载不出来. 在使用vue-cli3以上版本构建的应用时,跟以下方式api有些区别: 如何区分是哪个版本? 可查看项目中是否有co ...
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址 问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
- vue项目打包wap2app项目生成apk保姆级教程适合新手看，建议收藏
一.需要提前准备的有: 1.已部署到云端的网站+域名 2.下载软件HBuilder X, 下载地址官网. 3.创建项目 重要的配置部分来了 二.部分配置修改 问题1:如果你的网站没有事先为顶部预留安全 ...
- (三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
- vue工程打包上线样式错乱问题 - bug解决（4种）
vue工程打包上线样式错乱问题 - bug总结(4种) 项目开发完成后,执行npm run build,进行打包,将打包完成的dist文件部署在服务器.配置好域名解析,就可以实现工程上线. 上线后,有 ...
- 将vue项目打包部署到云服务器（傻瓜式宝塔面板）
前提准备 拥有一台云服务器(以个人的轻量级云服务器视角) 下载Xshell 先将自己的vue项目打包,得到dist就行 npm run build 通过xhsell连接云服务器 第一步应该是先创建实例 ...
- Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
- Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署 因为我只是单纯 ...
最新文章
- 更改Ubuntu gcc、g++默认编译器版本
- oracle 函数to_char(数据,'FM999,999,999,999,990.00') 格式化数据
- 深度学习之循环神经网络（5）RNN情感分类问题实战
- 1929. 数组串联
- getch方法_C语言中getch()函数详解及简单实例
- c语言——socket编程
- 论程序员如何玩阴阳师
- algo_KNN(k-nearest neighbor)
- 厉害了，大学生制作的学校三维实景模型
- 还搞不懂负数怎么用二进制表示？看完这一篇就懂了
- 2019年双十一倒计时JS代码
- canvas系列教程06 ——边界检测、碰撞检测
- asp毕业设计——基于asp+sqlserver的酒店预定管理系统设计与实现（毕业论文+程序源码）——酒店预定管理系统
- EMC设计的3大规律和3大要素
- js实现音频歌词同步
- MongoDB 批量写操作
- 富士施乐Fuji Xerox ApeosPort-V 4020 驱动
- [附源码]Python计算机毕业设计Django的网上点餐系统
- 物联网卡的作用有哪些
- 《 Kotlin极简教程 》陈光剑 编著（机械工业出版社，2017.9）