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

注意:vue项目打包后默认是指向服务器的根路径(好比apache默认www目录是根路径,固然也能够修改),这种状况不须要作路径的配置,只须要作history配置,若是不是发布到根路径而是www/vue目录下,则须要作路径配置,并作history配置html

   须要修改router.jsnew Router 配置,加一个 base: '/vue/', 它指定应用的基路径,默认是根路径'/',表示该应用是服务于localhost/vue路径下,因此必须加base配置,不然应用会展现404页面,固然了用history路由的话也必须加 mode: 'history';vue

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

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

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

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

             .htaccess文件内容spa

      <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>命令行

 

发布到其余路径或是更深的路径配置都是相似的code

参考:http://www.javashuo.com/article/p-uasrtzng-ku.html  router

相关文章
相关标签/搜索