前言:

  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项目部署的更多相关文章

  1. node vue 项目部署问题汇总

    场景:vue-router为history模式,不带项目名访问的部署,如果资源是用相对路径加载,则资源匹配路径不对 一.带项目名称访问,如部署到tomcat服务上 webpack:  build/ut ...

  2. Vue项目部署问题及解决方案

    Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.examp ...

  3. vue 项目部署

    vue项目部署到PHP项目 入口目录 vue项目打包后, 是一个单文件html 我们只需要把打包后的文件夹放在php项目的public下面 访问 xxx.com/h5/index.html 就可以访问 ...

  4. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  5. django项目、vue项目部署云服务器

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...

  6. vue项目部署上线

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...

  7. Vue项目部署遇到的问题及解决方案

    写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello ...

  8. 将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 ...

  9. nginx下载 并将vue项目部署上去

    这是一个比较全的nginx配置说明:新手可以先忽略,直接往下看:https://www.cnblogs.com/findbetterme/p/11289273.html nginx官网下载地址:htt ...

随机推荐

  1. WinForm程序打包工具InnoSetup使用说明图文教程

    WinForm程序打包工具InnoSetup使用说明图文教程 WinForm程序开发测试好了,如果将Debug/Release里面的文件发给客户使用,会让客户觉得你不够专业,但是使用VS自带的打包工具 ...

  2. eclipse没有(添加)"Dynamic Web Project"选项的方法

    建议使用代理lantern,否则可能要花很长时间显示和下载插件 http://www.dabu.info/eclipse-no-add-dynamic-web-project-option.html ...

  3. mongo的碎片整理

    由于业务原因,需要将过期数据删除,但有一个问题出现了,频繁删除数据之后,会产生很多磁盘碎片,这些碎片如果没有被重复利用, 进而会影响查询性能(表查询时仍然会扫描这部分删除数据的磁盘空间块),随需要处理 ...

  4. ubuntu14.04设置sublime text3为默认文本编辑器

    更新时间2017年07月20日17:35:04 原来的方法貌似并不试用,现在才发现,其实ubuntu下也和Windows下一样... 右键,属性,然后如图所示 set as default 即可. 之 ...

  5. Kali安装OCI8 for metasploit Oracle login

    ps:安装了好久,最好才发现很简单,步骤记录下吧 遇到oracle爆破登录的时候OCI8报错,如下图 安装oracle 前面关于oracle client的安装就看官方文档吧 http://dev.m ...

  6. 用Delphi实现网络视频编程

    在MSN.QQ等聊天类的应用程序中,都应用到了网络视频技术.Delphi使用Object Pascal语言是一种完全面向对象语言,可以开发出灵活强大的程序,开发网络视频程序也不在话下.一个完整的网络视 ...

  7. Tomcat学习笔记【1】--- WEB服务器、JavaEE、Tomcat背景、Tomcat版本

    本文主要讲学习Tomcat需要知道的基础知识. 一 Web服务器 1.1 简介 Web服务器可以解析HTTP协议.当Web服务器接收到一个HTTP请求,会返回一个HTTP响应,例如送回一个HTML页面 ...

  8. 我的Java开发学习之旅------>Java String对象作为参数传递的问题解惑

    又是一道面试题,来测试你的Java基础是否牢固. 题目:以下代码的运行结果是? public class TestValue { public static void test(String str) ...

  9. 如何查看apache配置文件路径

    我是用https://lamp.sh/安装的,apache配置文件位置在:/usr/local/apache/conf/httpd.conf如果是直接安装的apache,配置文件应该在:/etc/ht ...

  10. ubuntu把文件移动到指定的文件夹

    有个文件a.txt在/etc下,想把它移动到/etc/fuck文件夹中 cd /etc/fuck sudo mv a.txt 要移动到的文件夹 没报错就成功了