使用nginx部署vue项目

写在前面

最近在公司使用vue开发了一个项目，团队没有运维，所以自己学习了一下nginx部署前端项目。中间也遇到了一些问题，希望能给到大家一点参考。不喜勿喷。

打包文件

首先，进入项目文件夹下，执行 npm run build 打包项目文件，打包完成之后会在项目文件夹下生成dist文件夹。

配置host文件

进入C:\Windows\System32\drivers\etc 目录下，在hosts文件中增加一行 ip和域名的映射关系，例如：

127.0.0.1	test.demo.com

其中test.demo.com为后面在浏览器访问项目的域名

配置nginx

如果没有nginx的同学可以，自行下载。进入nginx文件夹下。

修改nginx.conf配置文件。

在server同级新增一个server

	server {
        listen       80;
        server_name  test.demo.com;
		location / {
		root   D:/xxx/xxx/dist;#此项为你的静态文件dist的路径
        index  index.html index.htm;
		try_files $uri $uri/ /index.html;
		autoindex on;       #开启nginx目录浏览功能
        autoindex_exact_size off;   #文件大小从KB开始显示
        charset utf-8;          #显示中文
        ## 跨域配置
		add_header 'Access-Control-Allow-Origin' '*';
		add_header Access-Control-Allow-Credentials true;
	}  
}

保存文件，重启nginx，至此已经可以通过浏览器地址 http://test.demo.com 访问已近可以看到页面了。

如果没有用的话且配置没有错的话，尝试 cmd执行

ipconfig /flushdns

本以为到这就结束了，我页面没有问题，可请求接口却出现了

We’re sorry but “XXX” doesn’t work properly without JavaScript enabled. Please enable it to continue.

百度了很多，有说history改成hash的，无效，而且我们的nginx配置里面有下面这行，所以也不是路由模式问题

try_files $uri $uri/ /index.html;

页面显示没有问题（如果出现上述错误且页面不能显示同学检查publicpath是否为“/”），只是接口报错，排查了很久，最后发现Remote Address是127.0.0.1 。

好吧，因为正常情况下开发模式devServer都会配置代理地址，可是打包却没有，本地127.0.0.1并没有启动后端项目，所以没有这个接口，但是nginx的返回200 ok，而不是404。

所以，有人说不影响线上运行也没有问题，因为一般情况下这个问题运维同学会解决。

本地运行如何解决这个问题？

方案一：直接在写死请求url公共部分，我用的是axios，如下图：

重新打包，刷新页面就可以请球成功了。但是不推荐在代码里面写死请求地址，如果只是想验证一下没什么问题。

方案二：如果是java，找后端要个jar包，启一下。直接刷新页面即可。

最后

都已经看到这里了，

点个攒再走吧，

码字不易。