15 Vue项目部署
前言:
VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访问到其资源文件就足矣!无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器,也用不了多少行代码。
npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外)运行npm run dev 来启动哪是开发机上做的调试的事情。
正确部署的做法很简单,通过npm run build 把生成的文件夹里的内容上传到http服务器上就可以通过 http来访问了,开发机上正常,上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。
一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的,也不存在资源文件引用错误的情况,但如果你不是根目录,就会有问题。
部署起来很简单:
1: 进入到项目的文件夹: 运行 npm run build
2: 会生成 manage文件夹,
看一下static文件夹包含的东西:主要就是CSS, fonts字体和JS, 无论程序怎么复杂,打包完后就是这些东西。 当然可能还会有一些图片等的静态文件,本项目没有图片。
3: 把生成的manage放到Tomcat的webapps文件夹下
4: 运行 “D:\Tomcat8\apache-tomcat-8.5.20\bin\startup.bat“, 启动Tomcatserver
5: 浏览器中输入: http://localhost:8080/manage/index.html#/
15 Vue项目部署的更多相关文章
- node vue 项目部署问题汇总
场景:vue-router为history模式,不带项目名访问的部署,如果资源是用相对路径加载,则资源匹配路径不对 一.带项目名称访问,如部署到tomcat服务上 webpack: build/ut ...
- Vue项目部署问题及解决方案
Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.examp ...
- vue 项目部署
vue项目部署到PHP项目 入口目录 vue项目打包后, 是一个单文件html 我们只需要把打包后的文件夹放在php项目的public下面 访问 xxx.com/h5/index.html 就可以访问 ...
- 阿里云安装Nginx+vue项目部署
阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...
- django项目、vue项目部署云服务器
目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...
- vue项目部署上线
前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...
- Vue项目部署遇到的问题及解决方案
写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello ...
- 将vue项目部署在Linux的Nginx下,并设置为局域网内访问
1. 下载 wget http://nginx.org/download/nginx-1.12.2.tar.gz 2. 解压缩 tar -zxvf linux-nginx-1.12.2.tar.gz ...
- nginx下载 并将vue项目部署上去
这是一个比较全的nginx配置说明:新手可以先忽略,直接往下看:https://www.cnblogs.com/findbetterme/p/11289273.html nginx官网下载地址:htt ...
随机推荐
- 资源:Localization – 本地化
Resource Dictionary –资源字典 所有的资源项在最终都会被整合到Resource Dictionary中的,也就是说无论是FrameworkElement的Resources,还是W ...
- 首选项框架PreferenceFragment部分源代码分析
由于要改一些settings里面的bug以及之前在里面有做过勿扰模式,准备对勿扰模式做一个总结,那先分析一下settings的源代码,里面的核心应该就是android3.0 上面的首选项框架Prefe ...
- 软件测试人员需要精通的开发语言(4)--- Java
接下来说下,当下最火的语言 - Java.Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言.Java 技术具有卓越的通用性.高效性.平台移植性和安全性,广泛应用于PC.数据中心.游戏控制台 ...
- 发送邮件 Email(java实现)
//发送邮件 private static void sendMail(String mail, String mailContext) { try { //获取文本中html的内容 并动态替换并显示 ...
- Coursera公开课Functional Programming Principles in Scala习题解答:Week 2
引言 OK.时间非常快又过去了一周.第一周有五一假期所以感觉时间绰绰有余,这周中间没有假期仅仅能靠晚上加周末的时间来消化,事实上还是有点紧张呢! 后来发现每堂课的视频还有相应的课件(Slide).字幕 ...
- OSGI简介(转)
原文地址 目前,业内关于OSGI技术的学习资源或者技术文档还是很少的.我在某宝网搜索了一下“OSGI”的书籍,结果倒是有,但是种类少的可怜,而且几乎没有人购买.因为工作的原因我需要学习OSGI,所以我 ...
- (转)jQuery的deferred对象详解
作者: 阮一峰 日期: 2011年8月16日 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始 ...
- springmvc fastjson 反序列化时间格式化
第一种情况是从后台拿到数据,进行反序列化,反序列化格式时间:试了一下很多网上的方法,最后发现还是在实体类上面的日期字段加上如下注解,可以完成格式化操作,否则默认就都是时间戳的格式: @JSONFiel ...
- 程序连接Oracle数据库出现未找到提供程序.该程序可能未正确安装错误提示
好不容易使用plsql可以成功连上数据库了,应用程序连接数据库却出现了问题 其实解决这个问题也简单: 1. 查看oracle安装目录下的BIN目录,E:\app\Administrator\prod ...
- POJ 2063 Investment (完全背包)
A - Investment Time Limit:1000MS Memory Limit:30000KB 64bit IO Format:%I64d & %I64u Subm ...