如何在云服务器部署vue history模式项目
vue 项目使用默认的 hash 模式时,浏览器 URL 地址中会有一个 # ,这跟以往的网站地址不太一样,可能也会让大部分人不习惯,甚至觉得它很丑。
想要去掉地址中的 # 也不难,主要分两部分,前端路由策略模式修改,以及后端服务器配置。
1. 前端路由配置整改
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import lazyImg from '@/components/lazyImg'
Vue.use(Router)
export default new Router({
mode: 'history', // 去掉#,需要路由模式改为history
base: '/dist/', // 这个配置也很重要,否则会出现页面空白情况
scrollBehavior: () => ({ y: 0 }),
routes: [{
path: '/home',
name: 'lazyImg',
component: lazyImg
}]
})
修改mode 为 history后 npm run dev 启动项目你会发现访问的地址再也没有‘#’了,但是当你打包部署后会发现资源都无法访问,出现 404 。那么,就需要进行下面的服务器访问重定向配置了。
2. 后端服务器配置
对于云服务器我主要用是Apache来部署的,我的主机的一些基础配置信息:
主机品牌:睿江云主机
主机系统为:Ubuntu_16.04_64
2.1 安装apache2
sudo apt update
sudo apt install apache2
2.2 引入重写rewrite模块
a2enmod rewrite
2.3 上传项目
我把打包后的dist文件上传到/var/www/html/vuetest目录下:
2.4 添加Apache配置
进入配置文件目录
vim etc/apache2/apache2.conf
修改配置
<VirtualHost *:80>
DocumentRoot /var/www/html/vuetest/dist
ServerName 127.0.0.1
<Directory /var/www/html/vuetest/dist>
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html
</Directory>
</VirtualHost>
2.5 重启Apache
/etc/init.d/apache2 restart
或者
service apache2 restart
2.6 访问页面
通过主机公网ip访问页面,就可以正确访问到项目了:
睿江云官网链接:www.eflycloud.com