vue项目在nginx中部署

nginx的配置文件:
添加如下server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
server {
listen 7070;
server_name localhost;


error_page 500 502 503 504 / 50x.html;
location = /50x.html {
root html;
}


root /data / xytest / project / zkview - ui / dist;
index index.html;


location / {
try_files $uri $uri / @router;
index index.html;
}


location@router {
rewrite ^ . * $ / index.html last;
}
}

添加完成后热加载nginx

1
nginx - s reload

nginx如何正确配置部署在子目录的vue项目(History模式)
Q1:Vue项目用Webpack打包后放到服务器上,但访问是404页面?
原因是vue的项目为单页应用,路由找不到所致。所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下,这样就都能找到路由了。
nginx配置

1
2
3
location / {
try_files $uri $uri/ /index.html;
}

因为项目是子项目,所以不能放在根目录下,index.html需要放在一个新建的teacher目录

Q2:配置好nginx后,发现这样虽然不会404,但是页面全部转到了根目录的index.html,访问的是空白页面?

于是调整了nginx和vue-router的配置如下:
nginx配置文件

1
2
3
4
5
###教师端 vue项目
location /teacher/ {
index index.html index.htm index.php;
try_files $uri $uri/ /teacher/index.html;
}

vue路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
routes: [{
path: '/teacher/login',
name: 'Login',
component: Login,
meta: {
title: '教师端登录中心'
}
}, {
path: '/teacher/courseCenter',
name: 'CourseCenter',
component: CourseCenter,
meta: {
title: 'CourseCenter'
}
}]

拓展:
apache 做web服务器的虚拟空间,开启.htaccess文件支持,也可以解决vue项目配置子目录的问题。

1
2
3
4
5
6
7
8
9
10
11

Options +FollowSymlinks
RewriteEngine On

RewriteCond %{REQUEST_URI} ^/(teacher|teacher/.*)$
RewriteRule ^/teacher/index\.html$ - [L,NC]

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(teacher|teacher/.*)$ teacher/index.html [L]

element-ui 的 upload组件的clearFiles方法调用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


重新上传