博客
关于我
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:连接报错“closing inbound before receiving peer‘s close_notify”
    查看>>
    mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
    查看>>
    mysqldump 参数--lock-tables浅析
    查看>>
    mysqldump 导出中文乱码
    查看>>
    mysqldump 导出数据库中每张表的前n条
    查看>>
    mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
    查看>>
    Mysqldump参数大全(参数来源于mysql5.5.19源码)
    查看>>
    mysqldump备份时忽略某些表
    查看>>
    mysqldump实现数据备份及灾难恢复
    查看>>
    mysqldump数据库备份无法进行操作只能查询 --single-transaction
    查看>>
    mysqldump的一些用法
    查看>>
    mysqli
    查看>>
    MySQLIntegrityConstraintViolationException异常处理
    查看>>
    mysqlreport分析工具详解
    查看>>
    MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
    查看>>
    Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
    查看>>
    mysql_real_connect 参数注意
    查看>>
    mysql_secure_installation初始化数据库报Access denied
    查看>>
    MySQL_西安11月销售昨日未上架的产品_20161212
    查看>>
    Mysql——深入浅出InnoDB底层原理
    查看>>