vue项目如何部署到nginx服务器
http {includemime.types;default_typeapplication/octet-stream;#log_formatmain'$remote_addr - remoteuser[remote_user [remoteuser[time_local] “$request” ’'$status bodybytessent"body_bytes_sent "bodybyt
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - remoteuser[remote_user [remoteuser[time_local] “$request” ’
'$status bodybytessent"body_bytes_sent "bodybytessent"http_referer" ’
‘“httpuseragent""http_user_agent" "httpuseragent""http_x_forwarded_for”’;
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server { #侦听8080端口
listen 8080; #定义使用 localhost访问
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / { #定义服务器的默认网站根目录位置
root html; #定义首页索引文件的名称
index index.html index.htm;
}
… … … (注释代码太多,就不全部贴出来了)
include servers/*;
}
通过配置文件我们可以看到其默认的网站根目录为html(即/usr/local/var/www),而默认的索引文件为index.html 和 index.htm,这下就找到原因了,原来我们的根目录少了首页索引文件,那就来手动创建一个吧:
cd /usr/local/var/www/ //进入到www目录下
touch index.html //创建一个新的index.html文件
vim index.html //编辑该文件
将如下代码写入index.html文件中:
我的nginx欢迎页面
按esc键,输入:wq推出编辑并保存(这个相信大家都会,但还是强迫症的写上了)。
回到浏览器(localhost:8080)刷新:
[](()多个Vue项目如何部署到服务器
[](()一、vue打包
在项目中输入npm run build
此时会生产一个dist目录
[](()二、将dist目录上传至ngnix中的html目录中
修改Nginx文件,找到nginx.conf
[](()三、如果此时有多个vue项目呢?
多加几个location即可
[](()四、最后记得保存
:wq
[](()五、重新启动Nginx
sudo nginx -s reload
[](()六:Nginx.conf的内容
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/dist/;
index index.html index.htm;
try_files $uri $uri/ @router;
index index.html;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
location @router {
#因此需要rewrite到index.html中,然后交给路由再处理请求资源
rewrite ^.*$ /index.html last;
}
location /admin {
alias /usr/local/nginx/admin/dist;
index index.html index.htm;
try_files $uri $uri/ @router;
index index.html;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的
location @router {
#因此需要rewrite到index.html中,然后交给路由再处理请求资源
try_files $uri $uri/ @router;
index index.html;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体>的文件
location @router {
#因此需要rewrite到index.html中,然后交给路由再处理请求资源
rewrite ^.*$ /index.html last;
}
[](()终端运行:
sudo nginx -s reload // 修改配置后重新加载生效

GitCode 天启AI是一款由 GitCode 团队打造的智能助手,基于先进的LLM(大语言模型)与多智能体 Agent 技术构建,致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话,还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力,真正做到“一句话,让 Al帮你完成复杂任务”。
更多推荐
所有评论(0)