vue开发项目打包上线

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

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

图片发自简书App

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

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

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

图片发自简书App


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

图片发自简书App


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

送给每位,不忘初心,前端路上一直进步的前端程序猿🤓🤓🤓

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,120评论 19 139
  • 梦中田园,山水之间; 三间茅屋,一亩荷田; 木桌竹椅,酒盅茶碗; 临风听雨,仰目观天; 任由来去,无所牵绊; 闲云...
    孤独乞丐阅读 1,891评论 0 0
  • 功能: 将List切分为指定大小的List组 源码:
    翼徳阅读 5,665评论 0 0
  • 人们常说,爱一个人,始于颜值、陷于才华、忠于人品……好吧,今天的周日随笔说的不是这么浪漫的话题,偶尔做个标...
    Jessica陈卡卡阅读 3,749评论 0 1
  • 昨天晚上在南宁杨美古镇住下了,吃了好吃的艾叶粑粑,今早房东说有中元节前的市场,我们就去逛了,人真不少。(广西中元节...
    naonaoxiao阅读 1,810评论 0 0

友情链接更多精彩内容