vue项目打包部署到nginx服务器上

一,打包前的项目配置修改

1. 修改资料路径并对之前开发环境的代理配置进行注释

修改资源访问路径publicPath: "./",目的是为了避免出现打包访问时出现空白页面

注释开发环境代理配置是由于后面在nginx进行代理配置

module.exports = {
  publicPath: "./",
  outputDir: "dist", // 输出文件目录
  //assetsDir: "static", // 配置js、css静态资源二级目录的位置
  devServer: {
    open: true, //设置启动项目时默认打开浏览器
    // proxy: {
    //   "/api": {
    //     target: "http://192.168.0.102:8081",
    //     changeOrigin: true,
    //     pathRewrite: {
    //       "^/api": "",
    //     },
    //   },
    // },
  },
};

2. 路由配置文件将mode: "history"注释或者改成hash模式

const router = new VueRouter({
  //mode: "history",
  routes,
});

3. 项目打包

npm run build

二，下载并配置nginx

1. 官网下载地址 : http://nginx.org/en/download.html

2. 选择稳定版下载，下载完成后进行解压

3. 配置nginx

解压后打开文件夹中找到conf文件夹下的 nginx.conf文件，打开后找到server进行主机配置修改，修改后保存文件

server {
        listen       90;  #nginx服务器开启的端口,默认是80,如果没有被占用，不用修改
        server_name  localhost; #本机主机名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
		#项目配置
        location / {
        	#vue项目打包后的文件所在地址
            root   D:/WorkFile/vueProjects/turang-vue/dist; 
            #vue项目启动入口页面
            index  index.html index.htm;
        }
        #跨域请求代理配置
        location /api/ {
        	#重写以/api为baseURL的接口地址(本人的请求接口前面都是有加/api的)
            rewrite ^/api/(.*) /$1 break;
            #需要代理访问的服务器地址
            proxy_pass http://192.168.0.102:8081;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

4. 在解压文件中打开cmd命令，启动nginx服务器

start nginx

启动服务时注意事项:

• 输入命令启动后，可以进入logs文件夹内，去查看是否有生成nginx.pid文件，如果没有生成，说明服务器没有启动成功，并且启动服务时出现屏幕命令行一闪而过的现象，说明是当前端口被占用了需要修改端口后，然后再热加载或者重启服务。

nginx服务器支持热加载，修改配置文件后可以通过下面命令进行热加载，这样就不需要每次修改都去停止服务再重启服务

nginx -s reload

• 如果输入nginx -s relaod 命令后，报错提示如下，并且是通过powershell窗口来执行命令的，那么需要切换为cmd命令窗口来执行热加载命令，就可以解决报错问题

nginx : 无法将“nginx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正
    确，然后再试一次。
    所在位置 行:1 字符: 1
    + nginx -s reload

5. 启动服务后，在浏览器输入 http://localhost:90/index.html 就能成功运行项目

注意:

如果你的nginx是放到阿里云服务器上来运行的，那么通过上面配置虽然可以启动项目，但是请求接口的时候有时会报 **502 bad gateway ** 错误，出现这个错误其实是和nginx没有关系的，这个是后端的问题，我遇到的情况是我们的后台项目出现异常错误。于是浏览器出现502错误，可以通过重启后台项目后，再进行请求，就能正常运行了。如果不是放到云服务器上，直接放到自己电脑上启动nginx服务访问也是可以正常访问的。