vuejs怎么在服务器上发布部署

首先VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访问到其资源文件就足矣!无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器,也用不了多少行代码。

npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外),楼主通过ssh进入到服务器里,再运行npm run dev 来启动哪是开发机上做的事情。正确的做法很简单,通过npm run build 把生成的dist文件夹(不要上传文件夹)里的内容上传到http服务器上就可以通过 http来访问了,开发机上正常,上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。

一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的,也不存在资源文件引用错误的情况,但如果你不是根目录,就会有问题,通过vue-cli 生成的开发目录,build以后默认引用资源文件的路径是

比如 app.js的引用方式<script type="text/javascript" src="/static/js/app.js"></script>

所以,如果你的目录结构是 如下

www/+hot/+static/+index.html

当你通过xxx.com/hot/index.html来访问的时候 会出现找不到app.js

因为index.html里引用的app.js路径是

http://www.xxx.com/static/js/app.js

但是app.js的实际路径是

http://www.xxx.com/hot/static/js/app.js 所以出现了404

要解决的方法很简单把引用方式 改成如下两种方式 都可以

<script type="text/javascript" src="./static/js/app.js"></script>
或者
<script type="text/javascript" src="/hot/static/js/app.js"></script>
推荐这样的方式,可以保正在vue-router生成的url下也不出现问题

都可以,当然这也不需要手动去改,

在webpack的配置文件中修改

assetsPublicPath: './'
或者
assetsPublicPath: '/hot/',

这样,我们就基本解决了有服务器子目下运行的问题,

当然,如果你还用到了vue-router

要在router的配置中加上

export default new Router({mode: 'history',base: '/hot/', //加上这一行

用浏览器打开xxx.com/hot/

一切运行正常,点击各种链接也能出来,但是由于我启用了history模式,我直接在浏览里访问 xxx.com/hot/item/1 这样的url是又404了,为什么 我可以在首页通过点击进入 xxx.com/hot/item/1 这个页面,但是直接访问又不行呢,

因为在history 模式下,只是动态的通过js 操作window.history 来改变有浏览器地址栏里的路径,并没有发起http请求,但当你直接 在浏览器里输入这个地址的时候 就一定要先对服务器放起http请求,但是这个目标在服务器上又不存在所以就返回了404了,怎么解决呢,就是把所有的请求全部转发到xxx.com/hot/index.hmtl上就可以了

我用的是apache 做web服务器的虚拟空间,而且开启支.htaccess文件支持,

我成我的文件里加上如下,就一切正常了,

<IfModule mod_rewrite.c>Options +FollowSymlinksRewriteEngine OnRewriteCond %{REQUEST_URI} ^/(hot|hot/.*)$RewriteRule ^/hot/index\.html$ - [L,NC]RewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^(hot|hot/.*)$ hot/index.html [L]
</IfModule>

这个配置的作用就是把所有服务器上不存在请求全部转发到index.html上去,这样就可以直接通过各种url来访问了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247711.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#入门详解(14)

接口&#xff0c;依赖反转&#xff0c;单元测试 接口是协约是规定&#xff0c;所以必须是公开的&#xff0c;只能是public; static void Main(string[] args){int[] num1 new int[] { 1, 2, 3, 4, 5 };Console.WriteLine(Sum(num1).ToString());Console.WriteLine(""…

SpringBoot操作MongoDB实现增删改查

本篇博客主讲如何使用SpringBoot操作MongoDB。 SpringBoot操作MongoDB实现增删改查 &#xff08;1&#xff09;pom.xml引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifac…

java面向对象的特征三:多态性 —(15)

1.多态性的理解&#xff1a;可以理解为一个事物的多种形态。 2.何为多态性&#xff1a; 对象的多态性&#xff1a;父类的引用指向子类的对象&#xff08;或子类的对象赋给父类的引用&#xff09; 举例&#xff1a; Person p new Man(); Object obj new Date(); 3.多态性的…

vue 中$index $key 已移除

之前可以这样: 123456<ulid"example"><liv-for"item in items">{{$index}}{{$key}}</li></ul>现在已经移除,如果还用的话就会报错:Uncaught ReferenceError: $index is not defined; 现在这样写: 123456<ul id"example&qu…

vue-resource全攻略

Vue.js——vue-resource全攻略 概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用&#xff0c;并实现了一个简单的跨域CURD示例。Vue.js是数据驱动的&#xff0c;这使得我们并不需要直接操作DOM&#xff0c;如果我们不需要使用jQuery的DOM选择器&#xff0c;就没有必要…

java面向对象:关键字 —(16)

static:静态的 1.可以用来修饰的结构&#xff1a;主要用来修饰类的内部结构 属性、方法、代码块、内部类 2.static修饰属性&#xff1a;静态变量&#xff08;或类变量&#xff09; 2.1 属性&#xff0c;是否使用static修饰&#xff0c;又分为&#xff1a;静态属性 vs 非静态…

《少年先疯队》第九次团队作业:Beta冲刺与团队项目验收

博文简要信息表&#xff1a; 项目内容软件工程https://www.cnblogs.com/nwnu-daizh/本次实验链接地址https://www.cnblogs.com/nwnu-daizh/p/11056511.html团队名称少年先疯队作业学习目标&#xff08;1&#xff09;掌握软件黑盒测试技术&#xff1b;&#xff08;2&#xff09;…

vue-resource jsonp跨域问题解决方法

最近在学习vue.js 碰到个ajax跨域请求的问题&#xff0c;之前知道可以用jsonp解决&#xff0c;但是一直没实践过&#xff0c;这次用发现里面好多问题&#xff0c;所以现在记录下来&#xff0c;希望可以给刚接触使用jsonp的同学一点帮助&#xff01; 关于什么是jsonp&#xff0c…

虚拟机无法连接至网络

问题&#xff1a; 虚拟机中的win XP系统无法连接至外部win10系统网络 尝试解决方法&#xff1a; 1&#xff09;换用桥接模式和NAT模式&#xff0c;无效 2&#xff09;恢复虚拟机网络属性至默认状态&#xff0c;无效 最终解决方法&#xff1a; 换用外部无线网络&#xff0c;即能…

java面向对象:关键字 —(17)

interface:接口 1.使用说明&#xff1a; 1.接口使用interface来定义 2.Java中&#xff0c;接口和类是并列的两个结构3.如何定义接口&#xff1a;定义接口中的成员 3.1 JDK7及以前&#xff1a;只能定义全局常量和抽象方法>全局常量&#xff1a;public static final的.但是…

原生js来实现对dom元素class的操作方法

jQuery操作class的方式非常强大 写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在)&#xff0c;就删除(添加)一个样式 4.hasClass:判断样式是否存在 下面为一toggleC…

python+selenium配置Edge浏览器

Chrome, Firefox只需要修改conftest.py文件中的 pytest.fixture(scopesession)def browser(): return BzwUtil.read_yml(config.yml,WEB_INFO,BROWSER) add option in pytest command line def pytest_addoption(parser): parser.addoption("--browser", actio…

JSON.parse和JSON.stringify方法

JSON.parse() JSON.parse()方法将json字符串转化为Javascript值或对象。 语法 JSON.parse(text[,reviver]) 参数 text:要被解析成Javascript值的字符串 reviver:若是一个函数则规定了原始值(text)如何被解析改造&#xff0c;在被返回前。 示例 JSON.parse({}); //…

java面向对象:异常处理 —(18)

1. 异常的体系结构 java.lang.Throwable |-----java.lang.Error:一般不编写针对性的代码进行处理。|-----java.lang.Exception:可以进行异常的处理|------编译时异常(checked)|-----IOException|-----FileNotFoundException|-----ClassNotFoundException|------运行时异常(un…

vue请求简单配置

简单记录一下vue的http请求配置相关 测试环境请求接口设置:   1. config/dev.env.js添加&#xff1a;     module.exports merge(prodEnv, {       NODE_ENV: "development",       API_ROOT: "http://", //配置http请求头     })…

【vue报错】——listen EADDRINUSE :::8080 解决方案

问题原因&#xff1a; 此项错误表示 8080 端口被占用 解决方案一&#xff1a; 打开cmd 输入&#xff1a;netstat -ano 查看所有端口信息&#xff0c;如图&#xff0c;找到端口 8081&#xff0c;以及对应的 PID 输入&#xff1a;tskill PID 即可杀死进程 解决方案二&#xff1a…

记录_20190626

java.lang.ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result异常的解决方法 原来JAVA中如果用BigDecimal做除法的时候一定要在divide方法中传递第二个参数&#xff0c;定义精确到小数点后几位&#xff0c;否则在不整除的情况下…

String与Array

public class Api {Testpublic void StringApi(){// equals() 判断内容是否相同区分大小写// equalsIgnoreCase() 判断内容是否相同不区分大小写// length() 获取长度// charAt(int index) 获取某个索引位置的字…

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑&#xff0c;实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解&#xff0c;分析下了解各种布局的优劣&#xff0c;同时希望能分享给初入前端的朋友们一些在布局上的经验&#xff0c;如果有那些地方总结的不好&#xf…

当谈论迭代器时,我谈些什么?

花下猫语&#xff1a;之前说过&#xff0c;我对于编程语言跟其它学科的融合非常感兴趣&#xff0c;但我还说漏了一点&#xff0c;就是我对于 Python 跟其它编程语言的对比学习&#xff0c;也很感兴趣。所以&#xff0c;我一直希望能聚集一些有其它语言基础的同学&#xff0c;一…