vue在nginx中部署

vue在nginx中部署本文主要介绍如何在nginx中部署vue前端。本文阅读前提：1、已经安装好nginx，可以参考如下文章：http://blog.csdn.net/wild46cat/article/details/780249892、已经打好vue的包，如果遇到问题，可以参考：http://blog.csdn.net/wild46cat/article/detail

archer.wu

37009人浏览 · 2017-09-18 23:16:19

archer.wu · 2017-09-18 23:16:19 发布

vue在nginx中部署

本文主要介绍如何在nginx中部署vue前端。

本文阅读前提：

1、已经安装好nginx，可以参考如下文章：http://blog.csdn.net/wild46cat/article/details/78024989

2、已经打好vue的包，如果遇到问题，可以参考：http://blog.csdn.net/wild46cat/article/details/78024796

好，下面上货。

1、首先把dist文件夹放在一个路径下，我放在这里：

2、修改nginx的配置文件：

添加如下server

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;
}
}

3、添加完成后热加载nginx

nginx -s reload

然后就能够访问你的前端了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^