vue.js打包之后可能会遇到的坑！

前言

最近在用webpack+vue写项目，经过几天的熬夜加班改BUG，终于把基本的框架给写完了，后面只要加一些小功能就可以了，太好吧！先来npm run build 打包出来看看吧！

打包中...，我们用本地服务器打开看一下。

额，不看不知道，一看吓一跳，坑咋这么多呢！但是作为一名积极向上的IT从业者，填坑吧。

1.打包之后没有被渲染出来

怎么回事，刚打开就告诉我啥也没有，这是要搞事情的前奏啊！，我们看一下错误信息，告诉我路径有问题，默默的看一下自己的地址栏和自己的文件所在目录，原来是我的打包文件没有放到根目录下，这个时候我们可以把我们的两个文件放到根目录下，但是作为一名有个性的IT人士，当然要看有没有其他方法。从上面的路径中隐隐约约有点预感，static是直接相对于根目录，说明这有可能打包的时候，有可能设置了绝对路径，如果我改成相对路径，那不就可以了吗。

我们去看一下项目文件下的config>index.js找到里面的build下的assetsPublicPath:'/'，把它改成assetsPublicPath:'./'，加个小点表示相对路径，不加表示绝对路径。npm run build运行。成功。

2.路由（router）mode:'history',导致页面不能渲染问题

地址栏的那个#怎么那么让我不舒服呢！对于有轻度强迫症的我来说，这是不能忍不了的。

我们在项目打包前，开发项目时（npm start），在vueRouter里设置mode:"history".可以去掉#号。

这里强行解释一番：

路由（router）默认 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，因为对于正常的页面来说，更换URl一定是会导致页面的更换的， 而只有更换URL中的查询字符串和hash值的时候才不会重新加载页面。

路由（router）的history模式，这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。没有#号。

npm run build打包中....

什么鬼，为什么我的路由（router）部分没有被渲染出来，这就是history的坑了，解决方法一，会到以前的hash模式；解决方法二，设置routes里的路由name。

这是因为路由（router）无法找到路径中的组件，所以也就无法渲染了。只需要修改 src > router > index.js，在每个path后加上组件名称就行了，这样就可以了。

这里有个小问题:

为了我们的时间考虑，还是放到根目录吧！

首页没有问题了，逐个链接测试一下。

这是什么鬼，路径和其他图片路径一样，图片也存在啊，为啥你就是这么傲娇，就是报错。来看一下控制台。

结合之前的./原来是相对路径问题，是我的开发文件assets下多个图片文件夹。

这个时候为了开发项目的可读性和维护性。只能默默的把前面改的相对路径'./'改回绝对路径'/'了。这就尴尬了，额额额，大家就当没看到哈！

暂时遇到这些坑，这是自己写项目的有感而发，希望对看过这篇文章的人有所帮助。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • vue 打包后的文件部署到express服务器上的方法

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发. 1.首先用vue-cli初始化项目目录 vue init webpack pro-name cd pro-name && npm ins

  • Parcel.js + Vue 2.x 极速零配置打包体验教程

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 "极速零配置Web应用打包工具" 简单接触了一下,单从效率上来说,确实要比 webpack 强上不少,可坑也挺多,未来升级之后应该会逐渐普及 官方文档:https://parceljs.org/getting_started.html 官方 GitHub:https://github.com/parcel-bundler/parcel 一.基本用法 Par

  • Vue打包后出现一些map文件的解决方法

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始打包 2,会在项目目录下自动创建dist目录,打包好的文件都在其中 解决办法:去src/config/index.js中改一个参数: productionSourceMap:false 把这个改为false.不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压

  • 详解如何使用webpack打包Vue工程

    详解如何使用webpack打包Vue工程

    使用webpack打包Vue工程 前言 入行一年,从什么都不懂的小白,到现在什么都懂一点的小白,也算是飞跃了.感叹一下现在的前端,从nodejs出来到现在各种各样的工具如雨后春笋般的出现.大神们疯狂的造轮子,玩的不亦乐乎.我等小白们,疯狂追赶,学的心肝脾肺都快衰竭.而我的精力也仅限浅尝辄止,但是学多一点总有好处的.本篇文章就是介绍如何使用webpack构建前端工程. 目标 本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包.制作出

  • Vue 中批量下载文件并打包的示例代码

    思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver 2. 下载文件 import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { a

  • vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览.根据官网打包出来的html直接打开是显示空白. vue打包后显示空白正确处理方法是 1.找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2.修改 找到对应的位置加上publicPath: '../../' 然后就成功了! 很多朋友还遇到这样的问题 vue打包后index文件一片空白,怎么回事呢? vue项目你npm run build打包后,点开index文件打开一片空白, 并报错解决方法:路径问题, 总结 以

  • 关于Vue背景图打包之后访问路径错误问题的解决

    案例环境 通过vue-cli脚手架创建的vue项目 在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsP

  • 详解vue静态资源打包中的坑与解决方案

    本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题. 1.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

随机推荐