最近在开发cms的时候使用Vue.js框架,利用vue-route、vue-cli结合webpack编写了一个单页路由项目,自己在服务器端配置apache。部署完成后,访问没问题,从页面中点击跳转就会报错,就会出现404现象!在本地开发中是没有这个问题的,调试的时候一切都是正常的。

步骤一:

  在config/index.js文件里的assetsPublicPath改成你放在服务器的文件路径里,根目录就是:/   如果是放在某个文件夹,例: /vuep/

步骤二:

  在自己的路由配置中加入base属性,属性的值根据自己项目放置的位置来设定,如图所示,我自己的就是:/vuep/

步骤三:

  设定完这些后,在Apache服务器上路由跳转是有问题的,需要在apache的配置文件httpd.conf里面配置路由跳转,(注:如果是放在根目录,RewriteRule的值就是./index.html [L] ,因为我自己的是放在vuep文件夹里面的)如图所示,在配置文件加入如下代码:

AllowOverride all
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./vuep/index.html [L]

配置完这些后,自己的项目就可以在apache服务器正常跳转了

vue部署服务器以及解决部署到apache路由出现404的更多相关文章

  1. Visual Studio 2017 系统发布部署服务器教程

    Visual Studio 2017 系统发布部署服务器教程       一.公司网站部署 --- 第一档 _Visual Studio 2017 发布网站系统教程  二.公司网站部署 --- 第二档 ...

  2. Nodejs学习笔记(1) Nodejs安装+借助express模块简单部署服务器

    1 安装 1.1 下载和安装 1.2 什么是REPL?如何使用? 1.3 npm对单一模块的安装和删除功能 1.4 通过package.json自定义模块(安装模块) 1.5 设置全局目录 2 部署网 ...

  3. vue 路由部署服务器子目录问题

    http://blog.csdn.net/hero82748274/article/details/73436497 <Egret 引擎入门> 这两天一直在查询vue经过打包后部署服务器一 ...

  4. 在同一个Apache服务器软件上部署多个站点的基础方法

    这篇文章主要介绍了Apache中Virtual Host虚拟主机配置及rewrite模块中的重要参数说明,是在同一个Apache服务器软件上部署多个站点的基础方法,需要的朋友可以参考下(http:// ...

  5. [原创]经历:asp.net oracle 部署问题以及解决方法

    精简的美丽...... 一.环境    开发环境        win7 64bit         Vs2010        Oracle 11g r2 64bit        <inst ...

  6. HP DL160 Gen9服务器集群部署文档

    HP DL160 Gen9服务器集群部署文档 硬件配置=======================================================Server        Memo ...

  7. 经历:asp.net oracle 部署问题以及解决方法

    原文:[原创]经历:asp.net oracle 部署问题以及解决方法 精简的美丽...... 一.环境    开发环境        win7 64bit         Vs2010       ...

  8. 网站建设部署与发布--笔记2-部署Apache

    网站部署(Linux) 部署Apache 操作系统:CentOS 7.2 1.首先连接云服务器,清楚系统垃圾. $ yum clean all Loaded plugins: fastestmirro ...

  9. maven intall在target文件夹中自动生成的war包部署服务器时缺斤少两

    1.问题描述,本地改动特别大或者升级系统操作,打war包部署服务器上程序时候,页面或者后台总是报错,原因就是比本地少东西. 2.问题排查解决:maven clean然后maven intall在tar ...

随机推荐

  1. pipeline配置前端项目

    vue pipeline { agent { label 'master'} options { timestamps() disableConcurrentBuilds() buildDiscard ...

  2. [BUUCTF]PWN20——ciscn_2019_n_5

    [BUUCTF]PWN20--ciscn_2019_n_5 附件 步骤: 例行检查,64位,没有开启任何保护 试运行一下程序,看看程序的执行情况 64位ida载入,找到main函数, 逻辑很简单,第一 ...

  3. Jquery监控audio单选框选中事件(实际通过click)

    $('input:radio[name="pathType"]').click(function(){ var checkValue = $('input:radio[name=& ...

  4. 如何获得Spring容器里管理的Bean,。不论是Service层,还是实体Dao层

    如何获得Spring容器里管理的Bean,.不论是Service层,还是实体Dao层, 下面的这个必须配置,否则必出错,空指针 下面的这个是代码 而获得bean代码如下: serviceManager ...

  5. Miniconda入门教程

    Miniconda 教程 介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.因为包含了大量的科学包,Anaconda 的下载文件 ...

  6. software engineer's resume(帮助你写程序员简历)

    关键词 参考 简历模板 参考 下面开始是正文(关键词原文) 介绍 本项目由海外兔 (https://osjobs.net) 维护,海外兔团队由一线互联网面试官组成,提供海内外公司一对一入职套餐以及算法 ...

  7. 【LeetCode】1094. Car Pooling 拼车

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 差分数组 代码 日期 题目地址:https://le ...

  8. 【LeetCode】739. Daily Temperatures 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 倒序遍历 栈 日期 题目地址:https://leetcode ...

  9. 【LeetCode】688. Knight Probability in Chessboard 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/knight-pr ...

  10. 【剑指Offer】反转链表 解题报告(Python)

    [剑指Offer]反转链表 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://www.nowcoder.com/ta/coding-interviews 题目描 ...