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. [DeeplearningAI笔记]卷积神经网络2.5-2.7 Network in Network/1*1卷积/Inception网络/GoogleNet

    4.2深度卷积网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 Inception网络 --Szegedy C, Liu W, Jia Y, et al. Going deepe ...

  2. NDK编译时两 .so之间调用问题

    Android C++(NDK)项目需要调用别人的代码,因此将其编译成了.so库,而自己的代码也编成了一个.so库. 结果编译成功,但是在运行时自己的.so调用别人的.so会失败,提示说没有正确传入参 ...

  3. tomcat8在centos7.5下配置开机启动

    本文参考这篇文章 一.在/etc/init.d下新建一个文件tomcat,并添加内容如下: #!/bin/sh # chkconfig: 345 99 10 # description: Auto-s ...

  4. LightOJ 1070 - Algebraic Problem 推导+矩阵快速幂

    http://www.lightoj.com/volume_showproblem.php?problem=1070 思路:\({(a+b)}^n =(a+b){(a+b)}^{n-1} \) \(( ...

  5. C11关键字&字面值改善

    1.原始字面值改善 原始字面值可以直接表示字符串的实际含义,但是一些特殊字符就需要转义. std::string str = "D:\A\B\test.txt"; std::cou ...

  6. 【SRM20】数学场

    第一题 n个m位二进制,求异或值域总和. [题解]异或值域--->使用线性基,解决去重问题. m位二进制--->拆位,每位根据01数量可以用组合数快速统计总和. #include<c ...

  7. 【BZOJ】1023: [SHOI2008]cactus仙人掌图 静态仙人掌（DFS树）

    [题意]给定仙人掌图(每条边至多在一个简单环上),求直径(最长的点对最短路径).n<=50000,m<=10^7. [算法]DFS树处理仙人掌 [题解]参考:仙人掌相关问题的处理方法(未完 ...

  8. 【leetcode 简单】第十八题 爬楼梯

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...

  9. 【leetcode 简单】第十三题 最大子序和

    给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连续子数组 ...

  10. 8、V模型、W模型、H模型

    软件测试&软件工程 ·软件测试与软件工程息息相关,软件测试是软件工程组成中不可或缺的一部分.·在软件工程.项目管理.质量管理得到规范化应用的企业,软件测试也会进行得比较顺利,软件测试发挥的价值 ...