博客
关于我
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 FEDERATED 提示
    查看>>
    mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
    查看>>
    Mysql group by
    查看>>
    MySQL I 有福啦,窗口函数大大提高了取数的效率!
    查看>>
    mysql id自动增长 初始值 Mysql重置auto_increment初始值
    查看>>
    MySQL in 太多过慢的 3 种解决方案
    查看>>
    MySQL InnoDB 三大文件日志,看完秒懂
    查看>>
    Mysql InnoDB 数据更新导致锁表
    查看>>
    Mysql Innodb 锁机制
    查看>>
    MySQL InnoDB中意向锁的作用及原理探
    查看>>
    MySQL InnoDB事务隔离级别与锁机制深入解析
    查看>>
    Mysql InnoDB存储引擎 —— 数据页
    查看>>
    Mysql InnoDB存储引擎中的checkpoint技术
    查看>>
    Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
    查看>>
    MySQL InnoDB引擎的锁机制详解
    查看>>
    Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
    查看>>
    mysql InnoDB数据存储引擎 的B+树索引原理
    查看>>
    mysql innodb通过使用mvcc来实现可重复读
    查看>>
    mysql insert update 同时执行_MySQL进阶三板斧(三)看清“触发器 (Trigger)”的真实面目...
    查看>>
    mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
    查看>>