博客
关于我
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 插入是否成功_PDO mysql:如何知道插入是否成功
    查看>>
    Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
    查看>>
    mysql 数据库备份及ibdata1的瘦身
    查看>>
    MySQL 数据库备份种类以及常用备份工具汇总
    查看>>
    mysql 数据库存储引擎怎么选择?快来看看性能测试吧
    查看>>
    MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
    查看>>
    MySQL 数据库的高可用性分析
    查看>>
    Mysql 数据库重置ID排序
    查看>>
    Mysql 数据类型一日期
    查看>>
    MySQL 数据类型和属性
    查看>>
    mysql 敲错命令 想取消怎么办?
    查看>>
    Mysql 整形列的字节与存储范围
    查看>>
    mysql 断电数据损坏,无法启动
    查看>>
    MySQL 日期时间类型的选择
    查看>>
    Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
    查看>>
    MySQL 是如何加锁的?
    查看>>
    MySQL 是怎样运行的 - InnoDB数据页结构
    查看>>
    mysql 更新子表_mysql 在update中实现子查询的方式
    查看>>
    MySQL 有什么优点?
    查看>>
    mysql 权限整理记录
    查看>>