Vue应用部署到服务器的正确方式

 更新时间:2017年07月15日 16:27:06   作者:darkCode  
本篇文章主要介绍了详解Vue应用部署到服务器的正确方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

本文介绍了Vue应用部署到服务器,分享给大家,希望此文章对各位有所帮助。

很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题,但真正放在服务器上后,会发现或多或少的问题,比如:页面出现空白现象,获取资源路径不对等,我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题,我也遇到过,那现在我们就来一一解决这样的问题。

如何打包

  1. 基于Vue-Cli,通过npm run build来进行打包的操作

如何部署

  1. 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端
  2. 但有时候,我们会直接将dist文件扔到服务端

出现的问题

  1. 打包到服务器后,出现资源引用路径的问题
  2. 打包到服务器后,出现空白页的问题
  3. 打包到服务器后,出现引入的css的type被拦截转换为"text/plain"问题
  4. 打包到服务器后,出现路由刷新404的问题

出现资源引用路径的解决方案

一般这个问题是由于在webpack配置打包发布的目录造成的。

情况一.如果是将static与index.html直接放在服务器根目录,也就是说,当前的应用访问的网址如:http://www.xxx.com

解决办法:

配置输出的publiPath:"/"或者"./"

情况二.直接将打包后的dist文件放在了服务器的根目录,也就是如果需要访问当前的应用,访问的网址

如:http://www.xxx.com/dist

解决办法:

首先需要在创建路由实例中增加:

const router = new VueRouter({
mode: 'history',
base: '/mobile/',
scorllBehavior: () => ({
y: 0
}),
routes
});

然后再打包发布目录:

publiPath:"/dist/"或者"http://www.xxx.com/dist/"

出现由于路由的history模式下刷新当前路由出现404的问题

今天做的应用发布到服务器上,发现当刷新当前路由的时候,就会出现404的状况,其实这是因为当刷新当前页面时候,所需要访问的资源在服务器上找不到,也就是说,我们在VueJs开发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了history模式。

解决办法

需要后端进行配合,参考https://router.vuejs.org/en/essentials/history-mode.html

出现引入的css的type被拦截转换为"text/plain"问题

这是我开发过程中遇到的感觉很奇葩的问题,我们都知道,一般基于Vue-Cli,通过WebPack打包后的资源不需要更改什么。可是我发现,当我把代码进行上传后,输入网址,看见的页面把我吓坏了,发现所有样式不存在了,第一反应就是认为是自己在进行打包配置过程中出现了什么问题,然后通过fillder进行调试,发现css文件是正确获取到的

 

可以看到,这个css文件的type被拦截转换为"text/plain",这时候,我又把相关的配置文件看了两遍,后面发现,真的是日了狗了,让我哭一会儿。先上图

我擦,原来是服务器端返回的类型居然是"text/plain"。这个问题很好解决,把这图直接给后端,是不是感觉被坑了/(ㄒoㄒ)/~~。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue.js实战之通过监听滚动事件实现动态锚点

    Vue.js实战之通过监听滚动事件实现动态锚点

    监听事件是我们在使用vue.js的时候经常使用的一个功能,下面这篇文章主要介绍了Vue.js实战之通过监听滚动事件实现动态锚点 的相关资料,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • Vue中使用ElementUI使用第三方图标库iconfont的示例

    Vue中使用ElementUI使用第三方图标库iconfont的示例

    这篇文章主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

    本篇文章主要介绍了浅谈vue.js中v-for循环渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 写给新手同学的vuex快速上手指北小结

    写给新手同学的vuex快速上手指北小结

    这篇文章主要介绍了写给新手同学的vuex快速上手指北小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 基于Vue实现关键词实时搜索高亮显示关键词

    基于Vue实现关键词实时搜索高亮显示关键词

    这篇文章主要介绍了基于Vue实现关键词实时搜索高亮显示关键词,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 使用Vue实现移动端左滑删除效果附源码

    使用Vue实现移动端左滑删除效果附源码

    这篇文章主要介绍了使用Vue实现移动端左滑删除效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue 去除路径中的#号

    Vue 去除路径中的#号

    大家都知道vue-router有两种模式,hash模式和history模式,带#的则是hash模式。接下来给大家带来了Vue 去除路径中的#号的解决方法,感兴趣的朋友一起看看吧
    2018-04-04
  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    这篇文章主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue表单输入绑定的示例代码

    Vue表单输入绑定的示例代码

    这篇文章主要介绍了Vue表单输入绑定的示例代码,本文使用v-model指令在表单input创建双向数据绑定,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • vue router动态路由设置参数可选问题

    vue router动态路由设置参数可选问题

    这篇文章主要介绍了vue-router动态路由设置参数可选,文中给大家提到了vue-router 动态添加 路由的方法,需要的朋友可以参考下
    2019-08-08

最新评论