Vuejs+vue-router打包+Nginx配置的实例


Posted in Javascript onSeptember 20, 2018

其实这个网上已经有了很多人写了,为什么我还要再写这一篇博客?因为我亲身把他们生产的坑给踩了个通透(摊手。

正文开始

本次的项目是基于vue-cli生成的项目,采用的vue-router的history模式。到这里相信大部人还是类似了,接下来就是一个坑死人不偿命的网上诸多博客都在采用的巨坑。

在进行打包的时候,很多博客里都写了,将/config/index.js下,build中的assetsPublicPath从/改为./。我很后悔,为什么当初这样照做的时候不去思考为什么,为什么要这样做,凭什么?如果这个有问题为什么webpack生成的时候不改反而一直放在那里?是谁傻?问题先放在这里,我们先按照那些教程走。修改完后npm run build,这样在你的项目下就生成了一个dist文件夹,里面就是生成的静态内容。假设现在你的dist文件夹已经在你的云服务器中了。接下来开始nginx的配置。

个人采用的是sudo apt-get install nginx安装的nginx,现在在命令行下,

cd /etc/nginx/conf.d/, 并在该目录下 sudo touch vueSite.conf,接下来修改该文件内容。

server {
 listen 3000; # 假设你项目监听的是3000端口
 root /path/to/dist;
 location / {
  try_files $uri $uri/ /index.html;
 }
}

然后

sudo nginx -t检查正确性,无误后sudo nginx -s reload。

接下来在你的浏览器下访问cloudserverhost:3000,就可以访问到你的项目主页了。

目前来看似乎是一切顺利呢,网上的教程真棒棒哦~

然后你可以试试,在cloudserverhost:3000/path/subpath下刷新试试,你会发现,页面没有了,浏览器器里会报错,你会发现请求的js/css等都变成了html页面的内容。这个问题就是出在了./下,我不知道第一个这样写出来的人他的项目是不是很幸运的只有一级路径,又或者他从来不会尝试去刷新页面,否则这个问题是无可避免的,为什么呢?./是相对路径,/则是绝对路径,当你在二级路径下刷新重新请求资源,你的请求路径是什么?把请求路径写出来我们就会发现问题出在哪里了。很难过,我写这篇博客只用不到10分钟,找到这个问题却用了差不多10小时,查了各种方法,我真是万万没想到。

因此,正式上线的项目,没有必要修改/config/index.js下,build中的assetsPublicPath。配置好nginx,你的项目就可以开始起飞了!

以上这篇Vuejs+vue-router打包+Nginx配置的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
JavaScript中reduce()的用法
May 11 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 #Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 #Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 #Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 #Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 #Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 #Javascript
微信小程序使用gitee进行版本管理
Sep 20 #Javascript
You might like
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
Js基础学习资料
2010/11/23 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
跟老齐学Python之print详解
2014/09/28 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python虚拟环境项目实例
2017/11/20 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Python流程控制 if else实现解析
2019/09/02 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
为什么会有内存对齐
2016/10/10 面试题
安全责任书范本
2014/04/15 职场文书
综合测评自我评价
2015/03/06 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL