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