vue cli3项目发布在apache www/vue目录下并配置history路由

Posted zhangruiqi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue cli3项目发布在apache www/vue目录下并配置history路由相关的知识,希望对你有一定的参考价值。

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

   需要修改router.jsnew 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路由的主要内容,如果未能解决你的问题,请参考以下文章

vue cli3 项目优化

vue cli3配置开发环境测试环境生产(线上)环境

VUE CLI3.X 创建项目

vue cli3 创建的项目中eslint 配置 问题的解决

用vue cli3创建的vue项目部署到nginx之初体验

用vue cli3创建的vue项目部署到nginx之初体验