参考文章: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
文件。
保存,完成!