当前位置：首页 > news >正文

vue-cli3+ 打包至非根目录静态资源(图片，字体文件)路径加载错误，导致不显示，丢失

news 来源：原创 2024/5/7 0:43:02

缘由

当开发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;
            })
    },
}