https://www.jianshu.com/p/4118e76d684a

我们用vue-cli(脚手架)自动生成项目,然后用webpack来打包,往往会遇到这种问题:

1、直接根据README.md里面的npm run build打包

2、打包后的文件在dist目录里面

 
dist

3、往往这个时候我们都会想到在本地用服务器打开来看看代码是否正常显示看看打包有么什么问题,例如路径是这样的http://127.0.0.1:5500/dist/index.html;然后页面打开是空白的,打开控制台查看发现代码报错404;或者是文件类型不对的报错例如:

 
报错

4、仔细看下报错其实发现是是路径问题

 
路径问题

5、那么这里打包配置需要修改了;

 
配置修改

在assetsPublicPath:"/"的反斜杠前面加一个点;然后在打包,代码就不会报错了;

6、这里这样打包的文件就有一个问题了,如果代码是放在服务器上的话比如我放在http://www.cmihee.wang/域名下的话它又会报错和第3步一样,还是打包引用的文件路径不对;这个时候我们就要assetsPublicPath:"./"里面的点去掉,然后打包丢在服务器上

以上就是打包需要注意的地方

【转】关于Vue打包的一个要注意的地方的更多相关文章

  1. vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步 ...

  2. cordova+vue打包webapp

    使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发. 1. 环境准备. (1)node.js  下载地址: https://nodejs ...

  3. vue打包上传oss

    今天把vue打包之后上传到oss,遇到了一点问题,现在解决了总结一下心得: OSS (Object Storage Service)名为对象存储,配合cdn使用达到静态文件托管加速,提升网站文件访问速 ...

  4. vue打包以及在Apache环境下的配置

    vue打包,我们都清楚,实在记不住命令的可以去package.json中看: npm run build 打包后会生成dist文件夹,将dist文件夹下的所有文件复制到Apache下的www的文件夹下 ...

  5. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  6. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  7. vue打包静态资源后显示空白及static文件路径报错

    1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...

  8. 后端 SpringBoot + 前端 vue 打包发布到Tomcat

    近段时间 做了一些前后端的开发 需要在Tomcat里进行发布    把自己整理的分享出来 后端打包 pom.xml 文件 <packaging>war</packaging> ...

  9. 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题

    这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...

随机推荐

  1. ThinkPHP+Memcache的缓存方案总结

    简介: ThinkPHP用S()方法可以缓存数据,这在访问数据库时非常有用,可以在有限时间内当数据库无变化时从缓存取数据,有变化时从数据库取数据. Memcached+Memcache是一个将数据保存 ...

  2. 居中div,居中浮动的元素

    定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法 这个也 ...

  3. 详解ASP.NET4 GridView的四种排序样式

    与ASP.NET 的其他Web控件一能够,Gridview控件拥有很多不同的CSS样式属性设置,包括象CssClass,Font字体,ForeColor,BackColor,BackColor, Wi ...

  4. call_user_func 具体使用方法,实例说明

    <?php class Person{ public $name="jack"; public static function say(){ echo "ok&qu ...

  5. 【leetcode 简单】 第三十五题 环形链表

    给定一个链表,判断链表中是否有环. 进阶: 你能否不使用额外空间解决此题? /** * Definition for singly-linked list. * struct ListNode { * ...

  6. C - Contest Setting Gym - 101982C dp 补题

    题目链接:https://vjudge.net/contest/273260#problem/C 学习了一下别人的思路,首先去重,然后离散化. dp数组开二维,每一次更新,状态转移方程,dp[ i ] ...

  7. Big O

    评价一个计算机算法的效率时用到的方法我们称之为Big O(Order of [大约是]). 有序二分查找算法: 比如我们通过二分查找算法查找容器里的10个数据. 那么,我们需要查找一个数据时正常应该是 ...

  8. pycharm显示行号

    在PyCharm 里,显示行号有两种办法: 1,临时设置.右键单击行号处,选择 Show Line Numbers. 但是这种方法,只对一个文件有效,并且,重启PyCharm 后消失. 2,永久设置. ...

  9. 某团队线下赛AWD writeup&Beescms_V4.0代码审计

    还是跟上篇一样.拿别人比赛的来玩一下.  0x01 预留后门 连接方式: 0x02 后台登录口SQL注入 admin/login.php 在func.php当中找到定义的check_login函数 很 ...

  10. 47、求1+2+3+...+n

    一.题目 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 二.解法 public class Solut ...