Vue + Nginx 项目部署（亲测有效）

原创已于 2022-03-26 00:15:02 修改 · 9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #nginx

于 2022-03-25 23:13:28 首次发布

nginx 反向代理同时被 2 个专栏收录

2 篇文章

订阅专栏

项目部署

1 篇文章

订阅专栏

本文详细记录了使用Vue CLI创建项目，配置publicPath为'/my-vue-app'，并通过Nginx进行反向代理的全过程。在Nginx配置文件中设置代理，启动服务后，可以通过'http://localhost/my-vue-app'访问Vue应用。总结强调了实践操作的重要性。

前言

笔者最近新学Vue，记录一下用Vue做项目部署和利用Nginx做反向代理。

开发环境

@vue/cli 5.0.3
Nginx 1.20.1

创建新项目

vue create my-vue-app //自选用 Vue2 或 Vue3 新建项目皆可

新建好的项目结构

新建好的项目结构
为了让项目在部署完成后，用户能够通过 http://localhost/my-vue-app 或 http://[my-domain-name]/my-vue-app 的形式去访问，我们在根目录下的 vue.config.js 里加入 publicPath: ‘/my-vue-app’,

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/my-vue-app'
})

本地利用 npm run serve 命令启动vue项目，然后在Nginx里配置

利用 npm run serve 命令启动vue项目，然后在Nginx里配置

在nginx里配置反向代理

nginx.conf

worker_processes  2;
events {
	worker_connections  1024;
}

http {
    include       mime.types;
	default_type  application/octet-stream;
	sendfile        on;
	keepalive_timeout  65;

	server {
    	listen       80;
    	server_name  localhost;

		location /my-vue-app/ {
            proxy_pass http://localhost:8080/my-vue-app/;
			proxy_redirect off;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_connect_timeout 90;
			proxy_max_temp_file_size 0;
            index  index.html index.htm;
			access_log  logs/my-vue-app.access.log;
			error_log  logs/my-vue-app.error.log debug;
        }
    }
}

测试nginx.conf

nginx -t

启动nginx服务器

start nginx	// 假如想重启nginx， nginx -s reload
			// 停止nginx， nginx -s stop

浏览器访问 http://localhost/my-vue-app

成功，搞定！

总结

以上就是今天所讲的全部内容。

源代码

关注我并发表不少于10字评论可以获取本文源代码。

码农经典语录

Linus Torvalds
Talk is cheap, show me the code.

蜂窝码农

DRY Principle (Don’t Repeat Yourself) 是做技术的最大笑话, DRY Principle应该改成 DORY Principle (Do Repeat Yourself)才对
没有中国参与的标准，不能称为世界标准*。

俗语
好读书、好记性不如烂笔头