![cover](https://img-blog.csdnimg.cn/img_convert/e3b5f948c5b747bfa3c99f7f26e34d85.png)
【vue部署】Apache部署vue项目
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
![](https://devpress.csdnimg.cn/6deffb34f7114cc1a2e1e686a67e0027.png)
·
Apache 下载安装(windows)
1. 下载
-
Apache 2.4.59
下载地址:httpd-2.4.59-240404-win64-VS17.zip -
Visual C++ Redistributable for Visual Studio 2015-2022 x64
下载地址:VC_redist.x64.exe
2. 安装
修改配置文件 D:/Apache24/conf/httpd.conf
- 修改服务器根目录为自己的Apache安装目录,如:
Define SRVROOT "D:\Apache24"
- (非必须)为避免端口冲突,可以将默认的80端口修改为其他端口。如:
Listen 8080
3. 启动服务
-
管理员身份打开命令提示符,在
D:/Apache24/bin/
文件夹下执行httpd -k install -n <服务器名>
(服务器名自定义)
-
Win+R
打开运行程序, 输入services.msc
,查看服务,就会找到上一步执行的<服务器名>
,选中服务,即可启动服务
-
在浏览器输入
http://localhost:8080
即可访问页面,看到“It works!
”.
8080
为安装时配置的Listen
端口
vue 部署配置
1. 基础配置
- 将
vue
打包好的dist
复制到D:/Apache24
,并修改dist
文件名为vuep
更新vue
dist
包时,不需要重新启动Apache
服务 - 修改配置文件
D:/Apache24/conf/httpd.conf
-
增加以下配置
Listen 8090 <VirtualHost *:8090> DocumentRoot "${SRVROOT}/vuep" ErrorLog "logs/local.com-error.log" CustomLog "logs/local.com-access.log" common <Directory "${SRVROOT}/vuep"> Options Indexes FollowSymLinks AllowOverride All Require all granted DirectoryIndex index.html </Directory> </VirtualHost>
Not Found.The requested URL was not found on this server.
vue router
配置
router
配置了base
属性时,打包时配置为base: '/vuep'
-
2. 解决页面刷新问题
-
启用
mod_rewrite
模块,删除#
LoadModule rewrite_module modules/mod_rewrite.so
-
添加配置
# 使路由重定向到index.html <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>
方案1. 将配置添加到
<Directory>
中方案2. 在
vuep
下新建.htaccess
文件,并将配置写入
tip: 当Apache
服务启动失败时,可以先查看端口是否被占.
以上就是Apache
部署vue
项目的所有步骤.
![]( https://profile-avatar.csdnimg.cn/default.jpg)
![](https://devpress.csdnimg.cn/7174e1ca86c447029bb12f9ec0bd281c.png)
![](https://devpress.csdnimg.cn/096f7827187446559bd7b6030eb5db38.png)
![](https://devpress.csdnimg.cn/6deffb34f7114cc1a2e1e686a67e0027.png)
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 8 个月前
更多推荐
所有评论(0)