博客
关于我
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 CONCAT函数
    查看>>
    multiprocessing.Pool:map_async 和 imap 有什么区别?
    查看>>
    MySQL Connector/Net 句柄泄露
    查看>>
    multiprocessor(中)
    查看>>
    mysql CPU使用率过高的一次处理经历
    查看>>
    Multisim中555定时器使用技巧
    查看>>
    MySQL CRUD 数据表基础操作实战
    查看>>
    multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
    查看>>
    mysql csv import meets charset
    查看>>
    multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
    查看>>
    MySQL DBA 数据库优化策略
    查看>>
    multi_index_container
    查看>>
    mutiplemap 总结
    查看>>
    MySQL Error Handling in Stored Procedures---转载
    查看>>
    MVC 区域功能
    查看>>
    MySQL FEDERATED 提示
    查看>>
    mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
    查看>>
    Mysql group by
    查看>>
    MySQL I 有福啦,窗口函数大大提高了取数的效率!
    查看>>
    mysql id自动增长 初始值 Mysql重置auto_increment初始值
    查看>>