前言

笔者最近新学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里配置

在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)才对
• 没有中国参与的标准，不能称为世界标准*。

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