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. grafana模板

    1.安静了这么久,换了一家公司,还有过年,去了上海,去了苏州,去了杭州,认识了一个人,跟老司机他们一起学k8s,所以很累很累,这是监控,也是在老司机的帮助下熟悉使用,3q!

  2. Spring整合JMS（三）——MessageConverter介绍（转）

    *注:别人那复制来的 1.4     消息转换器MessageConverter MessageConverter的作用主要有两方面,一方面它可以把我们的非标准化Message对象转换成我们的目标Me ...

  3. Jenkins使用教程之用户权限管理（包含插件的安装）

    在工作的过程中由于分工合作的关系,我们因为工作内容的不同可能分为不同的组织里,但是jenkins默认的权限管理并没有用户组的概念,所以我们需要第三方插件的支持来解决问题.插件:Role-based A ...

  4. 使用RVM轻松部署Ruby环境

    Ruby用得不多,但发现有业务需要部署指定的版本和插件.起初找了一些Fedora的src.rpm重新打包,发现依赖问题比较多,最终还是费劲的把el6的包编出来了. 不巧今天又有业务要求el5的包,原本 ...

  5. python中拷贝对象的区别

    一.赋值.引用 在python中赋值语句总是建立对象的引用值,而不是复制对象.因此,python变量更像是指针,而不是数据存储区域 这点和大多数语音类似吧,比如C++.Java等 1.先看个例子: v ...

  6. c#开发_Dev的关于XtraGrid的使用（GridControl小结）

    1,增加新行用InitNewRow事件,给新行某字段赋值.后结束编辑. private void grdView_InitNewRow(object sender, DevExpress.XtraGr ...

  7. 51nod1056 最长等差数列 V2

    基准时间限制:8 秒 空间限制:131072 KB 分值: 1280  N个不同的正整数,从中选出一些数组成等差数列.   例如:1 3 5 6 8 9 10 12 13 14 等差子数列包括(仅包括 ...

  8. Please move or remove them before you can merge

    在使用git pull时,经常会遇到报错: Please move or remove them before you can merge 这是因为本地有修改,与云端别人提交的修改冲突,又没有merg ...

  9. 七牛云 PHP SDK服务器鉴权失败！参数解释

    昨天搞了一下午,用7牛官方的SDK demo 1.上传凭证 $policy = array( 'callbackUrl' => 'http://api.example.com/qiniu/upl ...

  10. json格式的一些常用操作方法

    package com.liveyc.restfull.until; import java.util.HashMap; import java.util.Iterator; import java. ...