Vue项⽬从打包到部署到云服务器上（踩了不少坑）
你的Vue项⽬终于暂时告⼀段落了，但是我们都知道开发环境和⽣产环境的区别。我们平时都是在本地做开发，每次打开都是
localhost:8080的，如果你想将它变成你的⼩⽹站呢？
⾸先你看这篇博客必须要做的事情是：
①你有了⼀个可以正常运⾏的Vue项⽬
②你有了服务器+域名（没有就去买，腾讯云）
我所访问的数据接⼝是⾃⼰写的，部署在本地服务器那⾥的
Node.js+Express+MongoDB（⼀会要说明跨域处理）
nginx部署前端项目看似很简单的描述其实还是有不少坑。。。
⼀、打包
直接使⽤下⾯的命令就可以打包你的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  127.0.0.1:3000/;
}
}
你会发现有很多server{}模块，如果你有很多个项⽬要同时部署，可以在server模块中设置不同的监听端⼝，通过访问同⼀个域名不同端⼝可以访问不同的项⽬
配置结束后，就要重启我们的nignx以便载⼊配置
nginx  -s  reload
报错会提⽰你的
我这个云服务器关联的域名是luojiework
接下来访问www.luojiework（默认端⼝80）就可以访问到该项⽬了
访问是可以访问了，然后是最⿇烦的问题⼜来了，跨域——
三、跨域
我们部署之后会遇到经典的js问题，远程服务器地址不对，或者跨域问题
因为我的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开头的请求的域名转发到接⼝域名
问题解决。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。