本文共 1936 字，大约阅读时间需要 6 分钟。

Vue+Element UI项目打包后常见问题及解决方法

一、路由无法跳转

在项目打包之前，路由跳转是正常的，但打包后出现路由无法跳转且报错。将index.js中的mode从'history'改为'hash'。这是一个临时的解决方案，适用于不需要后端支持的情况。

const createRouter = () => new Router({
  mode: 'hash',
  base: 'lighthouse',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

原因分析：

• history模式（后退）通常需要后端支持，尤其是在大型项目中。
• hash模式虽然简单，但不适用于复杂的路由场景。

建议：

• 如果需要使用history模式，请确保后端服务器支持。
• 对于简单项目，hash模式是更好的选择。

二、背景图片无法显示（文件找不到）

将config/index.js中的assetsPublicPath配置为相对路径，以解决打包后的背景图片加载问题。

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './', // 修改为相对路径
  productionSourceMap: true,
  devtool: '#source-map',
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
}

原因分析：

• 打包后，静态资源路径需要重新配置，避免绝对路径导致的问题。
• assetsPublicPath配置错误会导致静态资源无法正确加载。

建议：

• 确保项目根目录下有static目录，且背景图片位于此目录下。
• 打包后，检查dist/static目录下的文件路径是否正确。

三、Element UI组件图标不显示

在utils.js中添加publicPath为'../../'，解决打包后组件图标显示问题。

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', // 解决Element UI中组件图标不显示问题
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

原因分析：

• Vue项目打包后，样式目录结构会发生变化。
• 组件图标路径需要调整，确保在构建后的目录结构下正确显示。

建议：

• 确保组件图标文件位于static/css目录下。
• 检查dist/static/css目录下的文件路径是否正确。

四、Iconfont引入路径错误

打包后，Iconfont字体文件路径错误。通过检查webpack.base.conf.js，确保文件加载路径正确。

// 在webpack.base.conf.js中添加以下配置
extractCSS: {
  publicPath: '../../'
}

原因分析：

• 打包前路径正确，但打包后路径发生变化。
• Iconfont字体文件大小超过限制时，会被转换为Base64格式。

解决方法：

• 检查打包后字体文件是否正确加载。
• 确保dist/static/fonts目录下包含Iconfont字体文件。

五、常见问题解决总结

通过以上方法，项目打包后问题应得到有效解决。

转载地址：http://ckpc.baihongyu.com/