Vue项目从打包到部署到云服务器上（踩了不少坑）

你的Vue项目终于暂时告一段落了，但是我们都知道开发环境和生产环境的区别。我们平时都是在本地做开发，每次打开都是localhost:8080的，如果你想将它变成你的小网站呢？

首先你看这篇博客必须要做的事情是：
①你有了一个可以正常运行的Vue项目
②你有了服务器+域名（没有就去买，腾讯云）

我所访问的数据接口是自己写的，部署在本地服务器那里的
Node.js+Express+MongoDB（一会要说明跨域处理）

看似很简单的描述其实还是有不少坑。。。

一、打包

直接使用下面的命令就可以打包你的vue项目

npm run build

打包完后你当前目录会多出个dist文件夹

然后我们需要将其放在HTTP服务器上，我选择了nginx

以上就是打包的过程，但是我遭遇了两个情况，打包后直接运行看下加载静态资源的情况发现，访问域名出现 .js 、.css等静态资源文件访问404，导致访问页面空白

经查明，在打包时需要使用相对路径来处理静态资源，更改build中资源发布路径配置，将 assetsPublicPath: '/' 改为 assetsPublicPath: './'，再次打包，并将资源部署到特定路径下，然后访问，此时index.html可以正常访问，同时js和css资源也可以正常访问，但是css中引入的assets目录下的大图片资源出错了（服务端404），还有我的element-ui组件的图标也显示异常，就是一个奇怪的符号方块

修改build文件夹下的utils.js代码

页面基本可以加载所有的静态资源了，页面显示正常

二、部署

首先你要对nginx有个了解：Web和反向代理服务器

接下来就将dist文件夹放到http服务器那边去，具体如何将这代码（dist文件夹）传到你的服务器上去，自行解决。

我们就要通过访问网址来访问到这个dist里的index.html
这里我把dist 文件部署在了nginx的文件里，比较好写路径访问，并改名成了html文件夹

配置服务器：在conf/nginx 里的http{}模块里添加如下代码

     server {
        listen       80;   //监听的端口
        server_name  localhost;   //服务器名字
        client_max_body_size  500m;   //这里是客户端请求数据body的最大值


        location / {
            root   html;       //配置路由，直接访问这个域名+80端口就是到html文件夹
            index  index.html index.htm;  //访问到index.html首先
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html-2;
        }
         
      //跨域处理
        location /api2/ {
            proxy_pass   http://127.0.0.1:3000/;
        }


    }

你会发现有很多server{}模块,如果你有很多个项目要同时部署，可以在server模块中设置不同的监听端口，通过访问同一个域名不同端口可以访问不同的项目

配置结束后，就要重启我们的nignx以便载入配置

nginx  -s  reload

报错会提示你的

我这个云服务器关联的域名是luojiework.cn

接下来访问www.luojiework.cn（默认端口80）就可以访问到该项目了

访问是可以访问了，然后是最麻烦的问题又来了，跨域——

三、跨域

我们部署之后会遇到经典的js问题，远程服务器地址不对，或者跨域问题
因为我的http服务器和后台接口都在同一个计算器上，真正的接口是

http://127.0.0.1:3000

项目里访问是

但是本地开发的时候，通过跨域处理已经解决过该问题了啊？
我以前的一篇博客

查阅了vue的书，得知是在开发时候，Vue.js会通过$npm run dev 来运行本地开发服务器，这个服务器中有一个代理可以把所有的/api2开头的请求例如

localhost:8080/api2/blogs/getAllBlog

转发到

localhost:3000/blogs/getAllBlog

但是在生产环境中发起请求时，就不存在代理服务器、开发服务器（dev server）了。其实解决的方式挺简单，但是当初鼓捣这个问题是真的久，我发现我的域名配置不需要rewrite

回头看上面的代码，代码的意思是将所有api2开头的请求的域名转发到接口域名
问题解决。