[Vue] 跟着 Vue 闯荡前端世界

透过 webpack 打包后的文件为静态页面,所以只要能通过 HTTP 访问到该页面就够,其中唯一可能发生问题的就是路径问题,这牵涉到 webpack 的设定需要与其搭配;另外当 Router 是使用 History 模式时,就需要透过 web server 设定来执行 url rewrite 机制,确保访问到正确的文件。


前言


透过 webpack 打包后的文件为静态页面,所以在布署上应该相较以 ASP.NET 开发的网站还简单许多,因为只要能够访问到该静态页面就搞定了,BUT 还是有两个布署重点需要注意,以下参考。

当布署至虚拟目录


当布署站台至 demo 这个虚拟目录之下,此时就必须透过 webpack 设定这个 demo 路径,在打包过程中让所产出的资源路径都补上 /demo/ 目录,这样才能正确地获得资源档。

http://192.168.9.79/demo/public/login

针对程序需要调整的项目如下:

  1. webpack 配置文件 output 的 publicPath 路径设定

    可调整参数档 assetsPublicPath 变量为 /demo/

  2. vue router 中的 base 路径

细心的朋友应该会发现这样分别各自去设定 /demo/ 路径实在是不大好,因此可以参考笔者“各环境组态切分技巧”文章,透过 build script 将这个路径数据传入,并且同步设定这两个位置的参数。

当 Router 为 History 模式


在 vue router 中可以指定使用 hashhistory 两种模式,在 hash 模式下仅匹配 # 前的 URL,但在 history 模式下访问站台页面时,会依据完整 URL 在伺服端找寻匹配的文件页面。

  • hash mode : http://192.168.9.79/demo/#/public/login
  • history mode : http://192.168.9.79/demo/public/login

在单页式应用程序 (SPA) 中,那些路径下当然不会有文件存在,因此需透过 URL Rewrite 机制在匹配不到任何静态资源时,指向这个单页应用程序依赖的 index.html 页面上来响应这个访问。以 IIS 为例,具体设置如下。

布署至虚拟目录

新增虚拟目录 demo 来对应到特定数据夹中,而数据夹内直接摆放 webpack 打包出的文件。

直接访问根目录可以正确显示画面

  http://192.168.9.79/demo/

直接访问特定页面

当直接访问 router 中的特定页面,不易外地就会直接赏你个 404 ,原因就如先前提到的,透过这个 URL 向服务端取得资源时,并无与  /devTools/langmaker/ 匹配的文件存在,因此响应找不到文件。

http://192.168.9.79/demo/devTools/langmaker

设定 URL Rewrite 规则

首先确认 IIS 有无安装 URL Rewrite 模块,如果没有请至官网下载安装。

安装完毕会出现 URL Rewrite 图示,选择 demo 虚拟目录后点选 URL Rewrite 进行设定。

点选新增规则

使用空白规则来修改

设定所有进入这站台的访问都套用此 URL Rewrite 规则

加入 Request is not a file 条件,表示当 URL 指到文件类资源时不套用此 URL Rewrit 机制。

当符合上述各条件时,直接指到 /demo/ 虚拟目录上


此时再度访问 /demo/devTools/langmaker 时,已经可以经由 URL Rewrite 机制指向这个 SPA 所依赖的 /demo/index.html 中,再透过 vue router 机制 mapping url 至特定页面组件来呈现画面。

参考资讯


vue-router 的 hash 模式与 history 模式


希望此篇文章可以帮助到需要的人

若内容有误或有其他建议请不吝留言给笔者喔 !