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

此方法实在windows环境下运行的

安装完nginx后进入D:\nginx\conf

修改nginx.conf配置文件

第一步：配置根目录

location / {
            root   D:\code\base-platform-vue\dist;#项目打包后的目录地址
            index  index.html index.htm;
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

第二步：配置跨域代理

location ~ ^/api/ {
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://0.1.2.3:8000;
		}

　　vue代码中的跨域配置如下：

proxyTable: {
      '/api': { //使用"/api"来代替"http://47.93.225.94:8000"
        target: 'http://0.1.2.3:8000', //源地址
        changeOrigin: true, //改变源
        pathRewrite: {
          '^/api': '/' //路径重写
        }
      }
}

　　vue发送请求的代码如下：

var url = '/api/v1/api/rootindrs';
axios.get(url,{}).then(function(data){

})

　　post请求也是一样的

配置完成后项目就可以起飞了