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

 更新时间:2018年09月20日 11:49:05   作者:Seven_Anon   我要评论

今天小编就为大家分享一篇Vuejs+vue-router打包+Nginx配置的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

正文开始

本次的项目是基于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配置的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 详解vue项目中如何引入全局sass/less变量、function、mixin

    详解vue项目中如何引入全局sass/less变量、function、mixin

    这篇文章主要介绍了详解vue项目中如何引入全局sass/less变量、function、mixin,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue-router重定向和路由别名的使用讲解

    vue-router重定向和路由别名的使用讲解

    今天小编就为大家分享一篇关于vue-router重定向和路由别名的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 详解Vue.js中.native修饰符

    详解Vue.js中.native修饰符

    这篇文章主要介绍了Vue.js中.native修饰符,给普通的HTML标签监听一个事件,之后添加 .native 修饰符是不会起作用的。需要的朋友可以参考下
    2018-04-04
  • Vue 页面状态保持页面间数据传输的一种方法(推荐)

    Vue 页面状态保持页面间数据传输的一种方法(推荐)

    vue router给我们提供了两种页面间传递参数的方式,一种是动态路由匹配,一种是编程式导航,接下来通过本文给大家介绍Vue 页面状态保持页面间数据传输的一种方法,需要的朋友可以参考下
    2018-11-11
  • 详解vue2.0监听属性的使用心得及搭配计算属性的使用

    详解vue2.0监听属性的使用心得及搭配计算属性的使用

    这篇文章主要介绍了vue2.0之监听属性的使用心得及搭配计算属性的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 基于Vue+element-ui 的Table二次封装的实现

    基于Vue+element-ui 的Table二次封装的实现

    这篇文章主要介绍了基于Vue+element-ui 的Table二次封装的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vuex state及mapState的基础用法详解

    vuex state及mapState的基础用法详解

    这篇文章主要介绍了vuex state及mapState的基础用法详解,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友跟随澳门金沙网上娱乐小编一起学习吧
    2018-04-04
  • vue router 配置路由的方法

    vue router 配置路由的方法

    这篇文章主要介绍了vue router 配置路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 在Vue中使用echarts的方法

    在Vue中使用echarts的方法

    这篇文章主要介绍了Vue中使用echarts的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • vue2中的keep-alive使用总结及注意事项

    vue2中的keep-alive使用总结及注意事项

    vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。本文给大家介绍vue2中的keep-alive使用总结及注意事项,需要的朋友参考下吧
    2017-12-12

最新评论