vue-cli路由成功页面不会显示_Vue 学习笔记（二十八）：Vue CLI 部署

最新推荐文章于 2024-09-27 15:33:05 发布

weixin_39526185

最新推荐文章于 2024-09-27 15:33:05 发布

阅读量455

点赞数

文章标签： vue-cli路由成功页面不会显示

本文链接：https://blog.csdn.net/weixin_39526185/article/details/113323626

版权

本文介绍了Vue CLI的部署方法，包括前后端不分离和分离的情况，强调了在`history`模式下Vue Router的配置要求。同时，详细讲解了CORS的概念、必要性和配置方法，以及PWA在HTTPS环境下的部署需求。最后，列举了一些常见的平台部署指南。

摘要由CSDN通过智能技术生成

Deployment

前后端不分离
如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分，那么仅仅需要确保 Vue CLI 生成的构建文件在正确的位置，并遵循后端框架的发布方式即可。
前后端分离
如果独立于后端部署前端应用——也就是说后端暴露一个前端可访问的 API，然后前端实际上是纯静态应用。那么可以将 dist 目录里构建的内容部署到任何静态文件服务器中，但要确保正确的 publicPath 。

本地预览

Previewing Locally

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve：

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

使用 `history.pushState` 的路由

Routing with history.pushState

在 history 模式下使用 Vue Router，是无法搭配简单的静态文件服务器的。例如，如果你使用 Vue Router 为 /todos/42/ 定义了一个路由，开发服务器已经配置了相应的 localhost:3000/todos/42 响应，但是一个为生产环境构建架设的简单的静态服务器会却会返回 404。

为此，你需要配置生产环境服务器，将任何没有匹配到静态文件的请求回退到 index.html。参考Vue Router 常用服务器配置指引。

CORS

如果前端静态内容是部署在与后端 API 不同的域名上，需要配置 CORS。

CORS

什么是 CORS

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。(注：并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。)

跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch )使用 CORS，以降低跨域 HTTP 请求所带来的风险。

什么情况下需要 CORS

跨域资源共享标准( cross-origin sharing standard )允许在下列场景中使用跨域 HTTP 请求：

前文提到的由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求。
Web 字体 (CSS 中通过 @font-face 使用跨域字体资源), 因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。
WebGL 贴图
使用 drawImage 将 Images/video 画面绘制到 canvas

跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求)，浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request)，从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。

CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。