vue.js项目打包上线
最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的。这里我简单的列出这个过程:
首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项:
上图中第一个要修改的就是静态文件的路径,打包后静态文件就在当前目录下,所以修改为./
第二个是环境设置为生产环境
修改好后打开cmd运行下面的命令打包即可:
注意下面的tip,告诉你这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如下:
这时我们需要使用服务器的方式来访问index.html就可以了。这里可能很多人也会遇到一些问题,比如大家可能在开发的时候使用的proxytable来解决跨域的问题,这里就会没有数据了,这个需要自己通过服务器在解决一下才可以的,proxytable在这里只是为了方便大家开发的跨域解决方案。
vue.js项目打包上线的更多相关文章
- vue.js 项目打包
vuejs是个前端框架,npm run dev的目的在于前端开发的时候可以实时调试.所以npm run dev 只是开发时期会用到,在生产环境中我们应该使用nginx,apahce tomcat等应用 ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
- vue.js项目构建
这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...
- vue.js项目安装
Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...
- 如何把vue.js项目部署到服务器上
如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...
- Vue.js项目的开发环境搭建与运行
写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装no ...
- vscode下面开发vue.js项目
vscode下面开发vue.js项目 https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...
- 建立多页面vue.js项目
介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...
- vue-cli脚手架搭建Vue.js项目
前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g PS:-g 就是 ...
随机推荐
- 搭建Discuz论坛
准备 LAMP 环境 LAMP 是 Linux.Apache.MySQL 和 PHP 的缩写,是 Discuz 论坛系统依赖的基础运行环境.我们先来准备 LAMP 环境 安装 MySQL 使用 yum ...
- jmeter-noguimodel
jmeter -Dthreads= -n -t ~/Desktop/image-controller.jmx -l myimage/out -e -o myimage/log -j myimage/r ...
- hive 上篇
hive 是以hadoop为基础的数据仓库,使用HQL查询存放在HDFS上面的数据,HSQL是一种类SQL的语句,最终会被编译成map/reduce,HSQL可以查询HDFS上面的数据:不支持记录级别 ...
- 门禁系统socket通讯编程
最近遇到一个socke udp协议通讯的需求,而且是16进制数据接收.这样在传输参数的时候老是提示参数错误,因为计算机是不能直接传输16进制的,会自行转换,所有以下代码非常完美的解决我的问题,同时也让 ...
- DEMO: springboot 与 mybatis 集成
之前一直在用springMVC,接触到springboot之后,感觉使用起来方便多了,没那多xml需要配置. 先来看看整个项目结构,当然是maven项目. 1.测试数据 DROP TABLE IF E ...
- Simple2D-24 Sprite 渲染树
如果要开发游戏,单单使用 Painter 绘制图片会变得十分复杂.如果使用 Sprite 对象进行显示,可以简单地实现图片的位移.旋转和缩放,结合 Action 对象可以实现复杂的动画效果.最重要的是 ...
- 搭建Turbine时,报错误:Property or field 'default' cannot be found on object of type 'com.netflix.appinfo.InstanceInfo'
Spring Boot + Eureka Server + Hystrix with Turbine: empty turbine.stream 配置的时候遇到了问题: Property or fie ...
- 编写jQuery插件(三)——三个插件例子
封装jQuery对象方法的插件 表格隔行变色插件 CSS部分: .even{ background:#CCC; } .odd{ background:#666; } .selected{ backgr ...
- 吴裕雄 实战PYTHON编程(5)
text = '中华'print(type(text))#<class 'str'>text1 = text.encode('gbk')print(type(text1))#<cla ...
- R及Rstuio下载及配置,及基本使用介绍
1.R和Rstudio下载地址 https://cran.rstudio.com/a 2.Rstudio 的配置 外观.代码显示比例配置 选中tools 选中globle options 选中appe ...