nginx部署vue

nginx部署vue脚手架项目

部署项目的前提条件
1、vue项目已经开发并且打包好
2、已经安装好nginx服务

配置axios

1、安装软件
npm install axios -S

2、人口配置
main.js

import Axios from 'axios'
Vue.prototype.$http = Axios

3、代理服务
vue.config.js

// 线上跨域 需要再nginx配置反向代理
// 本地跨域 
module.exports = {
  devServer: {
    port: 8071,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:4523/m1/1241224-0-default/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

4、请求案例

let _this = this;
this.$http({
	url: "/api/test",
	method: "get"
}).then(res => {
	_this.list = res.data.data;
	console.log(res)
}).catch(err => {
	console.err(error);
});

nginx配置

1、配置管理

location / {
    root   D:/project/WebStorm/vue-demo/vue-app-1/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

location /api/ {
    proxy_pass   http://127.0.0.1:4523/m1/1241224-0-default/;
}

2、服务管理

先进入nginx安装目录，执行如下命令
启动： start nginx
停止： nginx -s stop
重启： nginx -s reload