欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue项目打包常见问题整理

程序员文章站 2022-09-04 17:01:48
Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。 1、js 路径问题 脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’ 2、img 路径 ......

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

1、js 路径问题

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

1 build: {
2     assetspublicpath: './'
3 }

2、img 路径问题

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

1 if (options.extract) {
2     return extracttextplugin.extract({
3         use: loaders,
4         fallback: 'vue-style-loader',
5         publicpath: '../../'
6     })
7 } else {
8     return ['vue-style-loader'].concat(loaders)
9 }

3、favicon.ico 问题

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

1 new htmlwebpackplugin({
2     filename: config.build.index,
3     template: 'index.html',
4     favicon: config.build.favicon
5 })

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

1 module.exports = {
2     build: {      
3         favicon:path.resolve(__dirname, '../src/favicon.ico')
4     }
5 }

4、ie9+ 兼容性问题

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

① 安装 babel-polyfill

yarn add babel-polyfill

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

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

5、禁止生成 .map 文件

修改 src/config/index.js 中 productionsourcemap 值

productionsourcemap:false