目录

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;#本机IPlocation / {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即可通过指定端口访问。