Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。

1、js 路径问题

脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’

 build: {
assetsPublicPath: './'
}

2、img 路径问题

在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicPath: ‘…/…/’

 if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}

3、favicon.ico 问题

① 在 build/webpack.prod.conf.js 文件中 new HtmlWebpackPlugin 节点下, 添加一行:favicon: config.build.favicon

 new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
favicon: config.build.favicon
})

② 在 config/index.js 文件中 build 节点下,添加一行 : favicon:path.resolve( __dirname, ‘…/src/favicon.ico’ )( PS:favicon.ico 放在 src 目录下)

 module.exports = {
build: {
favicon:path.resolve(__dirname, '../src/favicon.ico')
}
}

4、IE9+ 兼容性问题

由于 axios 是基于 promise 之上实现的,在 IE 下会有兼容性问题。

① 安装 babel-polyfill

yarn add babel-polyfill

② 修改 build/webpack.base.conf.js 文件中 entry 节点

 entry: {
app: ['babel-polyfill', './src/main.js']
}

5、禁止生成 .map 文件

修改 config/index.js 中 productionSourceMap 值

productionSourceMap:false

Vue项目打包常见问题整理的更多相关文章

  1. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  2. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  5. vue项目打包,生成dist文件夹,如何修改文件夹的名字

    vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...

  6. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  7. vue项目打包-2-九五小庞

    vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体 ...

  8. vue项目打包成html,在本地点击直接能打开

    默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config-& ...

  9. cordova+vue 项目打包成Android(apk)应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

随机推荐

  1. FASTDFS 安装与开发

    FASTDFS介绍 FastDFS开源地址:https://github.com/happyfish100 简介 FastDFS 是一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存 ...

  2. Java翻转数组的方法

    java的api没用翻转数组的工具类,只能自己写了. int [] testIntArr = {1,2,3}; //翻转数组 for (int i = 0; i < testIntArr.len ...

  3. 使用spring boot +WebSocket实现(后台主动)消息推送

    言:使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!主要是tomcat的兼容与支持. ...

  4. BZOJ 2005 [Noi2010]能量采集 (数学+容斥 或 莫比乌斯反演)

    2005: [Noi2010]能量采集 Time Limit: 10 Sec  Memory Limit: 552 MBSubmit: 4493  Solved: 2695[Submit][Statu ...

  5. hdu2710 Max Factor

    题目 //下面这个是最先用的方法,因为学姐先讲完这个,所以懒得写代码,就将就着这个用,结果搞了老半天,还是错了,心累.. #include<stdio.h> #include<str ...

  6. 主题模型之概率潜在语义分析(Probabilistic Latent Semantic Analysis)

    上一篇总结了潜在语义分析(Latent Semantic Analysis, LSA),LSA主要使用了线性代数中奇异值分解的方法,但是并没有严格的概率推导,由于文本文档的维度往往很高,如果在主题聚类 ...

  7. [mobile]监听手机mobile上面软键盘的回车[enter]事件

    $(document).keypress(function(e) { if(e.which == 13) { if(!$(".qaSearchInput").val()) { Hn ...

  8. Oracle EBS使用adpatch工具打patch过程(hotpatch mode)

    目录(?)[-] 从Metalink下载补丁 上传解压 使用adpatch来打patch完整的日志 检查patch是否打成功 adpatch的日志文件 补充关于Oracle EBS Patch的类型 ...

  9. XML语法随记

    1.特殊字符的转义 &  ----  & <  ----  < >  ----  > "   ----  " ' ----- &ap ...

  10. java基础梳理