Vue项目打包常见问题整理

摘要：Vue 项目在开发时运行正常，打包发布后却出现各种报错，这里整理一下遇到的问题，以备忘。js 路径问题、img 路径问题、favicon.ico 问题、IE9+ 兼容性问题、禁止生成 .map 文件

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1714