vue-cli 或 iview-admin URL使用history模式，Apache服务器配置（结合PHPstudy测试）

参考文章：01.https://www.cnblogs.com/muxiaoye/p/acb5d8103ab4b1ac6ca0ab394aa8cb1b.html
02.https://blog.csdn.net/yusirxiaer/article/details/77865358?tdsourcetag=s_pcqq_aiomsg
我调试用的phpstudy的Apache环境，会结合这个环境配置。

1.检测Apache是否支持mod_rewrite

通过php提供的phpinfo()函数查看环境配置，通过Ctrl+F查找到“Loaded Modules”，其中列出了所有apache2handler已经开启的模块，如果里面包括“mod_rewrite”，则已经支持，不再需要继续设置。

如果没有开启“mod_rewrite”，则打开目录您的apache安装目录“/apache/conf/” 下的 httpd.conf 文件，通过Ctrl+F查找到“LoadModule rewrite_module”，将前面的”#”号删除即可。

如果没有查找到，则到“LoadModule” 区域，在最后一行加入“LoadModule rewrite_module modules/mod_rewrite.so”（必选独占一行），然后重启apache服务器即可。

2.让apache服务器支持.htaccess

如何让自己的本地APACHE服务器支持”.htaccess”呢?其实只要简单修改一下apache的httpd.conf设置就可以让 APACHE支持.htaccess了。打开httpd.conf文件(在那里? APACHE目录的CONF目录里面),用文本编辑器打开后,查找

Options FollowSymLinks
AllowOverride None

改为

Options FollowSymLinks
AllowOverride All

就可以了。
在PHPstudy的apache文件中找到httpd.conf，修改如下：

去掉这个前面的注释
LoadModule rewrite_module modules/mod_rewrite.so

这个路径是自己选择的
    DocumentRoot  "C:\phpStudy\PHPTutorial\WWW\dist"
    <Directory />
        Options +Indexes +FollowSymLinks +ExecCGI
        AllowOverride All //这里把None改为All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>

3.建立.htaccess 文件

如果是在windows平台下，刚开始还真不知道怎么建立”.htaccess”文件，因为这个文件实际上没有文件名，仅仅只有扩展名，通过普通方式是无法建立这个文件的，别着急，马上告诉你三种方法：三种方法都是先建立一个htaccess.txt的文本文件（当然，这个文本文件的名字你可以随便取），然后有三种方式给这个文件重命名：

（1）用记事本打开，点击文件–另存为，在文件名窗口输入”.htaccess”，注意是整个绿色部分，也就是包含英文引号，然后点击保存就行了。

（2）进入cmd命令窗口，通过cd切换当刚建立htaccess.txt文件的文件夹（也就是cd到包含htaccess.txt这个文件的文件夹），然后输入命令：rename htaccess.txt .htaccess ，然后点击键盘Enter键即可。

（3）通过ftp连接htaccess.txt所在文件夹，通过ftp软件重命名。
根据vue官方文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html
htaccess.txt中的内容如下：

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

推荐使用第二种改名方式

4.vue-cli 必须在config/index.js配置如下：

var path = require('path')
 
module.exports = {
  build: {
        index: path.resolve(__dirname, 'dist/index.html'),
        assetsRoot: path.resolve(__dirname, 'dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true
 	 }
  }

5.iview-admin可以直接打包，不管是vue-cli还是iview-admin 打包后的文件，都需要添加.htaccess文件。
保存，完成！

vue-cli 或 iview-admin URL使用history模式，Apache服务器配置（结合PHPstudy测试）

猜你喜欢