vue.js项目打包上线的图文教程


Posted in Javascript onNovember 16, 2017

最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的。这里我简单的列出这个过程:

首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项:

vue.js项目打包上线的图文教程

上图中第一个要修改的就是静态文件的路径,打包后静态文件就在当前目录下,所以修改为./

第二个是环境设置为生产环境

修改好后打开cmd运行下面的命令打包即可:

vue.js项目打包上线的图文教程

注意下面的tip,告诉你这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如下:

vue.js项目打包上线的图文教程

这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题,比如大家可能在开发的时候使用的proxytable来解决跨域的问题,这里就会没有数据了,这个需要自己通过服务器在解决一下才可以的,proxytable在这里只是为了方便大家开发的跨域解决方案。

以上这篇vue.js项目打包上线的图文教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript类型转换使用方法
Feb 08 Javascript
js取模(求余数)隔行变色
May 15 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
js querySelector() 使用方法
Dec 21 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
js 图片懒加载的实现
Oct 21 Javascript
Three.js基础学习教程
Nov 16 #Javascript
three.js实现3D视野缩放效果
Nov 16 #Javascript
three.js中3D视野的缩放实现代码
Nov 16 #Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
React/Redux应用使用Async/Await的方法
Nov 16 #Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
You might like
探讨:如何编写PHP扩展
2013/06/13 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
车间核算员岗位职责
2014/07/01 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
党员转正介绍人意见
2015/06/03 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
nginx七层负载均衡配置详解
2022/07/15 Servers