Vue 项目部署到服务器的问题解决方法
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决。
如何打包
基于Vue-Cli,通过npm run build来进行打包的操作
如何部署
- 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端
- 但有时候,我们会直接将dist文件扔到服务端
出现的问题
- 打包到服务器后,出现资源引用路径的问题
- 打包到服务器后,出现空白页的问题
- 打包到服务器后,出现引入的css的type被拦截转换为"text/plain"问题
- 打包到服务器后,出现路由刷新404的问题
下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验,来告诉大家如何解决这些问题。
一、前端配置:
①、router配置--指定路由起始(在开发模式中,Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录,但是在真实服务器中,项目肯定不会放在根目录,所以要指定router的base)
router
提前和后端商量好项目部署的服务器文件夹路径
②、编译打包配置
进入config --> index.js
build
③、使用npm run build进行打包,至此前端能做的配置已经做完
二、后端配置:
路由跳转出现404,主要原因是后端对这个虚拟的前端路由没有做任何处理,服务器在找不到指定路径下的资源时,只能向客户端返回404。
解决办法(Apache):进行url重写 --- 将Vue项目所在服务器文件夹下的路径,例如:
leibo.group/pcMall/.... 重写为 leibo.group/pcMall/index.html
.hatccess
具体的Apache开启allowoverride ,url重写,后端分分钟就解决了
如果是其他类型服务器
请自行参考https://router.vuejs.org/zh-cn/essentials/history-mode.html
总结:在单页面部署服务器中,其实更多的是思想的改变,利用前端路由来控制用户界面内容的变更,以上就是笔者在项目部署服务器中的一些经验,如果有什么阐述的不当的地方,还望指出!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue应用部署到服务器的正确方式
本文介绍了Vue应用部署到服务器,分享给大家,希望此文章对各位有所帮助. 很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题,但真正放在服务器上后,会发现或多或少的问题,比如:页面出现空白现象,获取资源路径不对等,我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题,我也遇到过,那现在我们就来一一解决这样的问题. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-C
-
Vue.js项目部署到服务器的详细步骤
前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文
-
Vue项目webpack打包部署到服务器的实例详解
Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'
-
vue 打包后的文件部署到express服务器上的方法
vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins
-
Vue 项目部署到服务器的问题解决方法
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题.遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端 但有时候,我们会直接将d
-
多个Vue项目部署到服务器的步骤记录
一.业务描述: 最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二.部署 (1)首先在本地测试项目可以启动并且能正常运行. (2)在项目中输入npm run build 此时会生成一个文件 (3)在服务器上安装Nginx,并将admin-web上传到服务器. 我上传的位置: (4)修改Nginx文件,找到nginx.conf 三.如果此时有多个vue项目呢? 多加几个location即可 四.最后记得保存 :wq 五.重新启动Nginx sys
-
SpringBoot项目部署到服务器上的方法(Jar包)
1. 部署方式 Springboot 和普通web 应用程序不一样,其本质上是一个 Java 应用程序,那么又如何部署呢? 通常来说,Springboot 部署会采用两种方式:全部打包成一个jar,或者打包成一个war.现在讲一下打包成 jar 部署. 2. 打包成 jar 第一种方法(idea) 1. clean 2. package 第二种方法(命令行): 键盘输入 windows + r : cd 命令切换到你项目所在路径: online 是我的项目名称,这里换成你自己的,可以看到当前是
-
django项目、vue项目部署云服务器的详细过程
目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜
-
将VUE项目部署到服务器的详细步骤
目录 一.idea中vue项目的打包 1.设置打包后项目的名称 2.将项目打包 3.生成的包内的文件如下: 二.部署到服务器 1.找到Nginx的安装位置 2. 将打包后的vue项目文件放在html文件架下面 3.将打包后的文件夹上传至html文件夹 4.配置打开页面的路径 三.用IP地址访问 总结 宝塔面板上操作 一.idea中vue项目的打包 1.设置打包后项目的名称 publicPath:process.env.NODE_ENV === 'production' ? '/back/' :'
-
把vue-router和express项目部署到服务器的方法
- 首先确定此项目在本地能够运行成功 在本地命令行中输入npm run start,无报错,且打开127.0.0.1:3000 有写的路由为/的页面,如图 此为文件层级关系 front为前端文件 xk3为后台express与数据库mysql链接的文件 用命令行进入后台并且运行,启动成功 这是路径为/的页面 在浏览器中输入路径http://localhost:3000/ 浏览器中显示WelCome to express 至此此项目在本地运行成功,我们现在就要放到服务器上. - 准备工作 此前服务器
-
vue项目部署到Apache服务器中遇到的问题解决
最近刚重构完,我们的一个项目,由原来的jsp模式改为了前后端分离,前端选型为vue,开发完成之后第一件时间就是要部署测试,服务端选的是Apache.本来以为很简单的一件事情,几经坎坷部署了两天才算能够正常访问了.先记录如下, 过程搭建Apache环境,vue项目build之后把生成的dist文件放到,Apache下面,启动Apache之后本以为能够正常访问了, 前提说下:vue项目路由model:history ,默认不会出现下面的问题,因为个人感觉项目路径中带个#实在难受 但是发现错误如下:
-
vue项目部署上线遇到的问题及解决方法
前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会
-
vue cli 3.x 项目部署到 github pages的方法
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g
随机推荐
- ERROR 1045 (28000): Access denied for user ''root''@''localhost'' (using password: YES)实用解决方案
- 容器高度100%的绝对定位布局
- 改进后的mkw3site.vbs(创建虚拟目录)
- 基于java math API 的详细解释说明
- Python采用socket模拟TCP通讯的实现方法
- JavaScript设计模式之外观模式实例
- 4种PHP异步执行的常用方式
- Android开发实战之漂亮的ViewPager引导页
- PHP MSSQL 分页实例
- jQuery.Uploadify插件实现带进度条的批量上传功能
- 快速掌握jQuery插件开发
- jQuery中last()方法用法实例
- 详解Java8 新特性之日期API
- 微信小程序实现鼠标拖动效果示例
- JavaScript判断日期时间差的实例代码
- phpBB论坛程序:老革命遇见新问题
- linux中如何使用python3获取ip地址
- Python使用matplotlib 画矩形的三种方式分析
- 易语言水波特效制作教学
- vue.js与后台数据交互的实例讲解