Vue项目在nginx部署启动

目录

1.打包

2.移动文件夹

 3.修改配置文件

4.重启nginx即可通过指定端口访问。

---

1.打包

        在package.json有一段代码是命令执行的，代码所示打包命令为build:prod,所以打包命令为npm install build:prod.

 "scripts": {
    "dev": "vue-cli-service serve --host 0.0.0.0",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },

npm install
#如果卡在timing idealTree:#root Completed in不动执行下边命令，不卡不执行
npm config set registry https://registry.npm.taobao.org 
npm config get registry

2.移动文件夹

        打包命令执行完成后会出现一个文件夹，默认为dist,在vue.config.js文件中可以通过outputDir设置文件名。将打包的文件夹移动到nginx目录。

  outputDir: 'getSal',

 

 3.修改配置文件

       server {
        listen       8077;#启动端口，与vue.config.js中const port = process.env.port || process.env.npm_config_port || 8077保持一致。
        server_name  0.0.0.0;#本机IP
        location / {
        root   getSal;#打包的文件夹名
	    try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
	location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8088/;#后端地址端口
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

4.重启nginx即可通过指定端口访问。