2023年6月21日发(作者：)

解决vue打包后静态资源路径错误的问题vue项⽬完成的最后⼀步就是打包部署上线，但是打包部署的过程往往不是那么⼀帆风顺的，现将遇到问题和解决⽅案记录如下。图⽚路径问题起因：页⾯中引⼊资源的⽅式往往有如下⼏种* HTML标签中直接引⼊图⽚， 如

* JS代码中定义资源路径属性，如src: require('../assets/images/')* CSS代码中定义资源为背景图⽚，如background-image: url("../assets/images/indexpng")上述三种资源加载⽅式还是有所区别的。前两种⽆论图⽚⼤⼩，都会使⽤url-loader加载器将其转化为base64编码的静态资源，⽽第三种⽅式则会根据webpack中配置的limit参数，动态选择符合⼤⼩要求的图⽚进⾏转码，此时则会导致不符合⼤⼩选择的图⽚加载失败，同时报出如下错误。localhost:8080/dist/static/css/static/img/解决：1.保证打包资源路径可⽤，⾸先要做的是配置执⾏时的资源参数，打开config⽬录下的看代码： index: e(__dirname, '../dist/'), assetsRoot: e(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //

修改为'./'满⾜资源相对路径2.保证资源转码条件符合。这块主要涉及到加载⽤到的加载器url-loader, 需要保证其配置可执⾏。打开build⽬录下的看代码：{ test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, //

该限制为⼩于10KB的图⽚，系统默认转码为base64 name: Path('img/[name].[hash:7].[ext]') }},依赖资源路径问题（字体、图标）起因：系统采⽤vue + elementUI，但是发现打包之后的字体⽂件和图标都不能正常显⽰，报错如下：解决：打开build⽬录下，添加路径配置

publicPath: '../../',看代码：// Extract CSS when that option is specified// (which is the case during production build) if (t) { return t({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //

解决element UI打包后字体⽂件丢失 }) } else { return ['vue-style-loader'].concat(loaders) }}以上内容，全为个⼈拙见，如有错误，还望指正。

2023年6月21日发(作者：)

解决vue打包后静态资源路径错误的问题vue项⽬完成的最后⼀步就是打包部署上线，但是打包部署的过程往往不是那么⼀帆风顺的，现将遇到问题和解决⽅案记录如下。图⽚路径问题起因：页⾯中引⼊资源的⽅式往往有如下⼏种* HTML标签中直接引⼊图⽚， 如

* JS代码中定义资源路径属性，如src: require('../assets/images/')* CSS代码中定义资源为背景图⽚，如background-image: url("../assets/images/indexpng")上述三种资源加载⽅式还是有所区别的。前两种⽆论图⽚⼤⼩，都会使⽤url-loader加载器将其转化为base64编码的静态资源，⽽第三种⽅式则会根据webpack中配置的limit参数，动态选择符合⼤⼩要求的图⽚进⾏转码，此时则会导致不符合⼤⼩选择的图⽚加载失败，同时报出如下错误。localhost:8080/dist/static/css/static/img/解决：1.保证打包资源路径可⽤，⾸先要做的是配置执⾏时的资源参数，打开config⽬录下的看代码： index: e(__dirname, '../dist/'), assetsRoot: e(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //

修改为'./'满⾜资源相对路径2.保证资源转码条件符合。这块主要涉及到加载⽤到的加载器url-loader, 需要保证其配置可执⾏。打开build⽬录下的看代码：{ test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, //

该限制为⼩于10KB的图⽚，系统默认转码为base64 name: Path('img/[name].[hash:7].[ext]') }},依赖资源路径问题（字体、图标）起因：系统采⽤vue + elementUI，但是发现打包之后的字体⽂件和图标都不能正常显⽰，报错如下：解决：打开build⽬录下，添加路径配置

publicPath: '../../',看代码：// Extract CSS when that option is specified// (which is the case during production build) if (t) { return t({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' //

解决element UI打包后字体⽂件丢失 }) } else { return ['vue-style-loader'].concat(loaders) }}以上内容，全为个⼈拙见，如有错误，还望指正。