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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
jquery简单体验
Jan 10 Javascript
js类中获取外部函数名的方法
Aug 19 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
layui表格内容溢出的解决方法
Sep 06 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
node.js实现快速截图
2016/08/27 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python中max函数用于二维列表的实例
2018/04/03 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
工作自我评价怎么写
2014/01/29 职场文书
事务机电主管工作职责
2014/02/25 职场文书
报关报检委托书
2014/04/08 职场文书
实习生评语
2014/04/26 职场文书
车辆挂靠协议书
2016/03/23 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js