vue.js项目打包上线的图文教程
最近一直坚持每个月写一个小的vue.js 开发的项目，最后开发完成后想到很久之前给别人回答的一个问题：vue的项目如何上线，当时有千奇百怪的回答，我在想，这些人都是肿了么，vue的官方都说了，这个框架只是做了view这一层，所以并不是把这些开发完的东西直接拷贝到服务器上，而且需要打包为静态文件上传服务器的。这里我简单的列出这个过程：
首先需要修改一下配置文件再打包，很多人都是遇到过打包后运行一片空白等等问题，这些问题主要就是路径的问题，所以需要修改config下面的index.js这个配置文件里选项：
上图中第一个要修改的就是静态文件的路径，打包后静态文件就在当前目录下，所以修改为./
第二个是环境设置为生产环境
修改好后打开cmd运行下面的命令打包即可：
注意下面的tip，告诉你这个打包后的文件需要放到服务器才能打开，不能直接使用浏览器打开，打包后的文件结构如下：
这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题，比如大家可能在开发的时候使用的proxytable来解决跨域的问题，这里就会没有数据了，这个需要自己通过服务器在解决一下才可以的，proxytable在这里只是为了方便大家开发的跨域解决方案。
以上这篇vue.js项目打包上线的图文教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在vsCode中书写Vue页面时无法提示,那真是很郁闷的事情,下面这篇文章主要给大家介绍了关于vsCode中vue文件无法提示html标签的操作方法,需要的朋友可以参考下2023-03-03
一步步从Vue3.x源码上理解ref和reactive的区别
vue3的数据双向绑定,大家都明白是proxy数据代理,但是在定义响应式数据的时候,有ref和reactive两种方式,如果判断该使用什么方式,是大家一直不很清楚地问题,下面这篇文章主要给大家介绍了关于从Vue3.x源码上理解ref和reactive的区别的相关资料,需要的朋友可以参考下2023-02-02
Vuex modules模式下mapState/mapMutations的操作实例
这篇文章主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
Vue3实现Element Plus表格的多选功能与条件操作
Element-plus是ElementUI的升级版,是一套基于vue2与vue3的桌面端组件库,它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面,本文给大家介绍了Vue3实现Element Plus表格的多选功能与条件操作,需要的朋友可以参考下2024-08-08
vuejs+element-ui+laravel5.4上传文件的示例代码
本篇文章主要介绍了vuejs+element-ui+laravel5.4上传文件的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
Vue路由回退的完美解决方案（vue-route-manager）
最近做了一个vue项目关于路由场景的问题,路由如何回退指定页面,在此做个记录,这篇文章主要给大家介绍了关于Vue路由回退的完美解决方案,主要利用的是vue-route-manager,需要的朋友可以参考下2021-09-09
elementUI使用el-upload上传文件写法及避坑总结(上传图片/视频到本地/服务器及回显+删除)
upload上传是前端开发很常用的一个功能,下面这篇文章主要给大家介绍了关于elementUI使用el-upload上传文件写法及避坑的相关资料,包括上传图片/视频到本地/服务器及回显+删除,需要的朋友可以参考下2023-03-03
有很多关于vue的todolist小程序，这篇文章主要介绍了 用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
当在做后台管理系统的时候，会用到用户的状态管理这个功能，本文主要介绍了element多选表格中使用Switch开关的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
今天小编就为大家分享一篇Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论