注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue目录下,则需要做路径配置,并做history配置

   一、 需要修改router.js中new Router 配置,加一个 base: '/vue/', 它指定应用的基路径,默认是根路径'/',表示该应用是服务于localhost/vue路径下,所以必须加base配置,否则应用会展示404页面,当然了用history路由的话也必须加 mode: 'history';

  二、 在vue.config.js的 module.exports = { publicPath: '/vue/' };  , 默认根路径'/'
  三、 修改httpd.conf文件,开启rewrite_module功能:  

    1. LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#,打开注释。一般搜索 mod_rewrite.so 能够找到,不同的服务器可能前面的红色路径不太一样

    2. 找到  AllowOverride None 的那行,把它改成 AllowOverride All,来使  .htaccess 文件生效。

  四、 在apache 的www/vue 目录下新建  .htaccess文件(此文件是看不到目录的但是在命令行貌似可以查到), 需要修改RewriteRule 为/vue/index.html, 否则刷新页面服务端会直接报404错误

.htaccess文件内容

      <IfModule mod_rewrite.c>
          RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /vue/index.html [L]
      </IfModule>

发布到其他路径或是更深的路径配置都是类似的

参考:https://segmentfault.com/a/1190000012548105  

  

vue cli3项目发布在apache www/vue目录下并配置history路由的更多相关文章

  1. apache+php+mysql windows下环境配置

    需要注意的是,目前apache和php以及mysql都要用32位的,机子是64位的也是安装32位.我之前安装64位的版本,总是出现问题.回归正题: 所需要软件: 1.apache:去官网下载,我这边用 ...

  2. vue项目打包后想发布在apache www/vue 目录下

    使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...

  3. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  4. vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,we ...

  5. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  6. MVC项目中,如何访问Views目录下的静态文件!

    <!--注意,是system.webServer节点,而非system.web--><system.webServer> <handlers> <add na ...

  7. Apache限制某个目录下的PHP文件没有执行权限

    为了安全期间,有时我们需要限制网站下的某些目录对于php脚本不能执行. 有两种方法可以参考: 1.  使用.htaccess 文件限制 在要限制php执行的目录下,创建.htaccess文件,加入内容 ...

  8. apache的bin目录下的apxs有什么作用? PHP模块加载运行方式

    2016-03-26 16:40:28   一个perl脚本安装http server扩展模块用的apxs - APache eXtenSion tool –with-apxs2=/usr/local ...

  9. Maven项目中读取src/main/resources目录下的配置文件

    在Maven项目的开发中,当需要读取src/下的配置文件时,该怎么做? 我们假设Resources下有一个文件名为kafka.properties的配置文件(为什么用kafka.properties, ...

随机推荐

  1. 给string定义一个扩展方法

    创建一个 static 的类,并且里面的方法也必须是static的,第一个参数是被扩展的对象,必须标注为this,使用时,必须保证namespace using进来了. 实例: using Syste ...

  2. PHP 分页+查询

    首先是主页面,与上篇分页页面相同 <table width="100%" border="1" cellpadding="0" cel ...

  3. nginx的请求限制

    一.http协议的连接与请求 总结: HTTP请求是建立在一次TCP连接的基础之上. 一次TCP请求至少产生一次HTTP请求. 二.连接限制 limit_conn_module 配置语法: Synta ...

  4. 最少步数&P1443 马的遍历

      1330:[例8.3]最少步数 s数组:记录(1,1)到达每一点需要的最少步数 s[1][1]自然为 0,其余初始化为 -1 que数组:que[#][1] 表示(1,1)可到达点的 x 坐标 q ...

  5. log4net保留几天内的日志

    想实现保留7天(一周)内的日志,网上一堆下述代码 <appender name="RollingLogFileAppender" type="log4net.App ...

  6. OpenStack 对接 Ceph 环境可以创建卷但不能挂载卷的问题

    问题 环境:Nova.Cinder.Glance 都对接了 Ceph RBD 后端存储. 以往的操作包括上传镜像.创建卷.挂载卷都是一切正常的,但突然出现了无法挂载卷的问题,而且还是因为 Ceph 客 ...

  7. kvm简介及创建虚拟化安装(1)

    kvm虚拟化介绍 一.虚拟化分类 1.虚拟化,是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机.在一台计算机上同时运行多个逻辑计算机,每个逻辑计算机可运行不同的操作系统,并且应用程序都可以在相互独立 ...

  8. ABAP 判断字符串是否是数字

    通过正则表达式: IF cl_abap_matcher=>matches( pattern = '^(-?[1-9]\d*(\.\d*[1-9])?)|(-?0\.\d*[1-9])$' tex ...

  9. linux常用命令(11)less命令

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  10. delete file SVN commit error has no URL

    在提交SVN的时候遇到这个提交失败的提示: delete file SVN commit error has no URL 我的提交顺序是: 先在自己工程的文件夹删除 ->工程中删除 -> ...