nginx部署vue项目

一. vue配置讲解

在vue.config.js文件中，module.exports是配置路由转发的，几个重要的属性讲解

① publicPath

publicPath: '/ulane/', 此属性配置上，如果访问的路径为127.0.0.1:8080/ulane/,就会进入到前端项目加载前端信息,如果没有配置默认为'/'。

② devServer下的proxy
'^/' 代表如果访问的路径中没有/ulane/开头，就会访问到后端项目，也就是从前端实现了路由转发

module.exports = {
  publicPath: '/ulane/',
  devServer: {
    proxy: {
      '^/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        xfwd: true      //添加x-forward标头
      }
    }
  },
}

二. Nginx配置讲解

在nginx配置文件中，同样有几个重要的项

    server {
        listen       80;
        server_name  localhost;

		location /ulanegw/ {
           proxy_pass http://127.0.0.1:8080/;
        }
		
        location /ulane/ {
             root  D:/nginx-and-redis/nginx-1.22.0/html;
             index  index.html index.htm;
        }

① server_name 和 listen

也就是ip和端口号，只有访问的路径为nginx的ip+端口号，才会进入到nginx服务中。

② location

例: 访问路径为localhost:80/ulane/,nginx服务经过转发访问的资源为 D:/nginx-and-redis/nginx-1.22.0/html/ulane/路径下的。

例：访问路径为localhost:80/ulanegw/test,则nginx经过转发后访问的路径是 http://127.0.0.1:8080/test,根据末尾有没有/，判断是否添加上请求的路径地址。 还有好多规则，请自行根据项目百度。

三. vue项目部署到nginx

①项目打包

运行 npm run build,会生成一个dist 文件夹(也可能生成别的名称，默认dist)

②项目部署

将项目放到nginx软件包的html文件夹下面，并将dist文件夹更改为ulane,如下图所示：

然后启动nginx项目，访问localhost:80/ulane/ 即可。