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 相关文章推荐
JQuery与iframe交互实现代码
Dec 24 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
vue+element实现表单校验功能
May 20 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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为SHOPEX增加日志功能代码
2010/07/02 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP图片加水印实现方法
2016/05/06 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
python语言是免费还是收费的?
2020/06/15 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
联欢晚会主持词
2014/03/25 职场文书
2014年老干部工作总结
2014/11/21 职场文书
Go语言编译原理之变量捕获
2022/08/05 Golang