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 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python实现的简单文本类游戏实例
2015/04/28 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python 调整图片亮度的示例
2020/12/03 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
工程管理专业毕业生自荐信
2014/01/24 职场文书
幼儿园秋游感想
2014/03/12 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
挂职学习心得体会
2014/09/09 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
利用Python实现模拟登录知乎
2022/05/25 Python