缘由

当开发vue项目时,ele字体图标显示无任何问题,然而当项目打包部署上线时,图片,字体文件等静态资源就丢失了,通过分析是因为项目打包时是非根目录,通过publicPath进行了配置,静态资源没有匹配到publicPath,因此打包出来的路径错误,导致页面不显示资源

分析

由于是打包至非根目录下,我们需要对webpack中的publicPath进行配置,同时记得修改router.js中的base地址

// 打包至非根目录下
// vue.config.js
publicPath: "/tpls/vue/"
// router/index.js
base: process.env.BASE_URL
  • 本地开发时ele字体图标载入正常:
    在这里插入图片描述
  • 打包部署上线后ele字体图标丢失:

在这里插入图片描述

  • 其他js.css文件的载入:

在这里插入图片描述

  • 实际应加载的路径为:
http://xxxxx.cn/tpls/vue/fonts/element-icons.535877f5.woff

我们发现除了静态资源外,js,css文件均正常载入,我们所要实现的就是修改webpack打包配置指定其打包路径

实现

// vue.config.js
const _publicPath = '/tpls/vue/'
module.exports = {
  publicPath: _publicPath,	 // 部署应用包时的基本 URL
  chainWebpack: config => {
  		// 匹配相应的文件进行配置
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => {
                options['limit'] = 4096
                options['publicPath'] = _publicPath		// **重点:添加路径
                return options;
            })
        config.module
            .rule('media')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => {
                options['limit'] = 10000
                options['publicPath'] = _publicPath		// **重点:添加路径
                return options;
            })
        config.module
            .rule('fonts')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => {
                options['limit'] = 4096
                options['publicPath'] = _publicPath		// **重点:添加路径
                return options;
            })
    },
}    
Logo

前往低代码交流专区

更多推荐