博客
关于我
vue+elementUI项目打包后访问不到资源文件
阅读量:157 次
发布时间:2019-02-28

本文共 1910 字,大约阅读时间需要 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字体文件。

五、常见问题解决总结

  • 路由问题:

    • 如果使用history模式,请确保后端支持。
    • 如果使用hash模式,请优化项目结构,避免过多路由跳转。
  • 背景图片问题:

    • 确保static目录下有背景图片文件。
    • 检查assetsPublicPath配置是否正确。
  • Element UI图标问题:

    • 确保组件图标文件位于static/css目录下。
    • 检查utils.js中的publicPath配置是否正确。
  • Iconfont字体问题:

    • 确保字体文件大小不超过限制,避免Base64转换问题。
    • 检查dist/static/fonts目录下的文件路径是否正确。
  • 通过以上方法,项目打包后问题应得到有效解决。

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

    你可能感兴趣的文章
    mysql replace用法
    查看>>
    Mysql Row_Format 参数讲解
    查看>>
    mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序
    查看>>
    MySQL Server 5.5安装记录
    查看>>
    mysql server has gone away
    查看>>
    mysql slave 停了_slave 停止。求解决方法
    查看>>
    MySQL SQL 优化指南:主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
    查看>>
    MYSQL sql语句针对数据记录时间范围查询的效率对比
    查看>>
    mysql sum 没返回,如果没有找到任何值,我如何在MySQL中获得SUM函数以返回'0'?
    查看>>
    mysql Timestamp时间隔了8小时
    查看>>
    Mysql tinyint(1)与tinyint(4)的区别
    查看>>
    mysql union orderby 无效
    查看>>
    mysql v$session_Oracle 进程查看v$session
    查看>>
    mysql where中如何判断不为空
    查看>>
    MySQL Workbench 使用手册:从入门到精通
    查看>>
    mysql workbench6.3.5_MySQL Workbench
    查看>>
    MySQL Workbench安装教程以及菜单汉化
    查看>>
    MySQL Xtrabackup 安装、备份、恢复
    查看>>
    mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
    查看>>
    MySQL _ MySQL常用操作
    查看>>