使用Mac的Apache服务配置Vue Router History模式

使用Mac的Apache服务配置Vue Router History模式

  1. 小说前端 🧩
  2. 5 years ago
  3. 5 min read

Mac的Apache基本操作

Mac OS X 系统自带了Apache服务器，我们偶尔用来在本地测试一下简单的Web应用还是可以玩的。

打开终端的命令

# 开启apache: 
sudo apachectl start
# 重启apache: 
sudo apachectl restart
# 关闭apache: 
sudo apachectl stop

过程中注意事项

1、使用sudo权限，回车会提示输入电脑密码。

2、开启Apache服务器后，在浏览器地址栏输入127.0.0.1，成功可正常出现【It Works】的默认提示页面。

3、网站的根目录：打开Finder(访达)，使用command+shift+g组合键，可以快速前往路径/Library/WebServer/Documents，这就是Mac下Apache服务器的文件路径。把我们的web项目代码放到这个路径下，就可以在浏览器打开了～

4、使用完毕需要关闭Apache服务器，不然会一直消耗电脑内存。

Vue Router的history模式及Apache配置

1、路由配置中设置mode为history模式（默认hash）

当你使用 history 模式时，一定是需要后台服务配置支持的！需要后台服务配置支持！需要后台服务配置！

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2、Apache重写配置

在Vue项目/public目录下新建.htaccess文件，这样生产打包后生产的/dist目录下就会包含该文件（或者直接新建到Web站点根目录） 按照Vue Router官方文档中配置例子，编辑并保存文件内容

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

3、修改Apache默认配置

让Apache支持mod_rewrite及允许override

3-1 打开Apache目录,并备份原始的备份文件

cd /etc/apache2
sudo cp httpd.conf httpd.conf.bak

#// 如果后续发生错误，使用以下命令恢复备份文件
sudo cp httpd.conf.bak httpd.conf

3-2 修改配置文件httpd.conf

  • sudo模式下使用vi或者vim编辑httpd.conf配置文件
#// 使用vi编辑,sudo命令使用admin权限
sudo vi httpd.conf
  • 启用rewrite
# vi命令行模式下，查找rewrite_module位置（回车键开始查找，N键查找下一处）
/rewrite_module
# 输入i 进入vi编辑模式(ESC键退出编辑模式，回到命令行模式)
i
# 启动rewrite_module,将行首的#号去掉即可
  • 设置允许Override
# 在对应发布的文件夹允许Override
# vi命令行模式下，输入/AllowOverride查找AllowOverride位置
/AllowOverride
# 输入i进入到编辑模式，将AllowOverride None修改为AllowOverride All
i
AllowOverride All
# ESC退出编辑模式，输入:wq!强制退出并保存
:wq!

3-3 重启Apache服务

任何的修改之后，都不要忘记重启

sudo apachectl restart

4、打包Vue部署应用

4-1 修改vue.config.js文件

在devServer下面增加historyAPIFallBack的重写配置

是否可省略待考究,请根据自身实际情况调整

publicPath: process.env.NODE_ENV === 'production'? '/': '/',
devServer: {
        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
        historyApiFallback: {
            rewrites: [{
                from: /^\*/g,
                to: '/index.html' //与publicPath有关(HTMLplugin生成的html默认为index.html)
            }]
        }

    }

4-2 生产打包并部署到站点根目录

npm run build

通过build命令打包，然后把/dist目录下文件部署到站点根目录/Library/WebServer/Documents

4-3 测试使用 这个时候，通过http://127.0.0.1/可以愉快地访问站点了，并且在你的站点里面玩命的刷刷刷新，如果刷新之后挂了，多半还是Apache的服务配置没成功。

写在最后

Vue Router-HTML5 History模式：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

mac自带本地web服务器的使用：https://blog.csdn.net/xie123_csdn/article/details/76131208

新手如何在Mac配置Apache服务器：https://blog.csdn.net/wanxue0804/article/details/79434058

vue-router apache 配置history mac环境：https://blog.csdn.net/HangMine/article/details/83027677

JavaScript Vue Vue Router Mac Apache