很多时候我们发现辛辛苦苦写的 vuejs 应用经过打包后在自己本地搭建的服务器上测试没有什么问题, 但真正放在服务器上后, 会发现或多或少的问题, 比如: 页面出现空白现象, 获取资源路径不对等, 我相信以 vueJs 为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题, 我也遇到过, 那现在我们就来一一解决这样的问题.
如何打包
基于 Vue-Cli, 通过 NPM run build 来进行打包的操作
如何部署
将打包出来的资源, 基于 Vue-Cli 的一般是 dist 目录下有 static 目录和 index.html 文件, 可以直接将这两个文件扔到服务端
但有时候, 我们会直接将 dist 文件扔到服务端
出现的问题
打包到服务器后, 出现资源引用路径的问题
打包到服务器后, 出现空白页的问题
打包到服务器后, 出现引入的 CSS 的 type 被拦截转换为 "text/plain" 问题
打包到服务器后, 出现路由刷新 404 的问题
出现资源引用路径的解决方案
一般这个问题是由于在 webpack 配置打包发布的目录造成的.
情况一. 如果是将 static 与 index.HTML 直接放在服务器根目录, 也就是说, 当前的应用访问的网址如: http://www.abc.com
解决办法:
配置输出的 publiPath:"/" 或者 "./"
情况二. 直接将打包后的 dist 文件放在了服务器的根目录, 也就是如果需要访问当前的应用, 访问的网址如: http://www.abc.com/dist
解决办法:
首先需要在创建路由实例中增加:
- const router = new VueRouter({
- mode: 'history',
- base: '/mobile/',
- scorllBehavior: () => ({
- y: 0
- }),
- routes
- });
然后再打包发布目录:
publiPath:"/dist/" 或者 "http://www.abc.com/dist/"
出现由于路由的 history 模式下刷新当前路由出现 404 的问题
今天做的应用发布到服务器上, 发现当刷新当前路由的时候, 就会出现 404 的状况, 其实这是
因为当刷新当前页面时候, 所需要访问的资源在服务器上找不到, 也就是说, 我们在 VueJs 开发应用的过程中, 设置路由的路径不是真实存在的路径, 并且使用了 history 模式.
解决办法
需要后端进行配合, 参考 https://router.vuejs.org/en/essentials/history-mode.html
出现引入的 CSS 的 type 被拦截转换为 "text/plain" 问题
这是我开发过程中遇到的感觉很奇葩的问题, 我们都知道, 一般基于 Vue-Cli, 通过 WebPack 打包后的资源不需要更改什么. 可是我发现, 当我把代码进行上传后, 输入网址, 看见的页面把我吓坏了, 发现所有样式不存在了, 第一反应就是认为是自己在进行打包配置过程中出现了什么问题, 然后通过 fillder 进行调试, 发现 CSS 文件是正确获取到的
可以看到, 这个 CSS 文件的 type 被拦截转换为 "text/plain", 这时候, 我又把相关的配置文件看了两遍, 后面发现, 真的是日了狗了, 让我哭一会儿. 先上图
我擦, 原来是服务器端返回的类型居然是 "text/plain". 这个问题很好解决, 把这图直接给后端, 是不是感觉被坑了 /(ㄒ o ㄒ)/~~.
来源: http://server.51cto.com/sOS-598529.htm