Vue项目打包常见问题整理
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 文件
修改 src/config/index.js 中 productionSourceMap
productionSourceMap:false本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!