vue项目如何配置public静态资源路径访问
更新时间：2023年11月09日 14:54:24 作者：crayon-shin-chan
这篇文章主要介绍了vue项目如何配置public静态资源路径访问方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目配置public静态资源路径访问
一般的vue项目都有一个初始index.html，而其他js、css都是这个html引入的，默认情况下使用绝对路径引入，如/js/app.js
这样就有一个问题，静态资源经常要部署在不同的上下文路径下，如nginx将vue静态资源部署在/static下
此时使用绝对路径访问不到index.html引入的js、css等，而相对路径是不变的
解决
vue.config.js
module.exports = {
publicPath: ''
}配置publicPath即可，而这个的默认值是'/'
vue打包后静态资源路径错误的问题
vue项目完成的最后一步就是打包部署上线，但是打包部署的过程往往不是那么一帆风顺的，现将遇到问题和解决方案记录如下。
图片路径问题
起因：
页面中引入资源的方式往往有如下几种
- * HTML标签中直接引入图片， 如
<img src="../assets/images/index.png"> - * JS代码中定义资源路径属性，如
src: require('../assets/images/index.png') - * CSS代码中定义资源为背景图片，如
background-image: url("../assets/images/indexpng")
上述三种资源加载方式还是有所区别的。
前两种无论图片大小，都会使用url-loader加载器将其转化为base64编码的静态资源，而第三种方式则会根据webpack中配置的limit参数，动态选择符合大小要求的图片进行转码，此时则会导致不符合大小选择的图
片加载失败，同时报出如下错误。
localhost:8080/dist/static/css/static/img/index.254207f.png
解决：
1.保证打包资源路径可用，首先要做的是配置build.js执行时的资源参数，打开config目录下的index.js
看代码：
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // 修改为'./'满足资源相对路径
2.保证资源转码条件符合。这块主要涉及到加载用到的加载器url-loader, 需要保证其配置可执行。打开build目录下的
webpack.base.conf.js
看代码：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 该限制为小于10KB的图片，系统默认转码为base64
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
依赖资源路径问题（字体、图标）
起因：
系统采用vue + elementUI，但是发现打包之后的字体文件和图标都不能正常显示，报错如下：
解决：
打开build目录下utils.js，添加路径配置 publicPath: '../../',
看代码：
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 解决element UI打包后字体文件丢失
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文介绍了Vue.js在SEO优化方面的挑战,并提供了一些方法来解决这些问题,包括使用服务器端渲染、预渲染和使用VueRouter的History模式来生成静态HTML页面,以及添加meta信息和内部链接来提高搜索引擎的索引和排名2025-02-02
在本篇内容里小编给大家整理了关于Vue.js中的extend绑定节点并显示的方法以及相关知识点，需要的朋友们学习下。2019-06-06
这篇文章主要为大家详细介绍了vue递归组件实现树形结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
本文主要介绍了Element Plus实现Affix 固钉，Affix组件用于将页面元素固定在特定可视区域，文中通过示例代码介绍的非常详细，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了Vue 动态生成数据字段的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了优化Vue项目编译文件大小的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了Vue中el-table条件渲染防止样式乱掉问题,通过使用:key="Math.random()" 可解决样式错乱问题,此key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes,依次来提升页面渲染性能,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了Vue使用vm.$set()解决对象新增属性不能响应的问题,为了解决这个问题，Vue提供了一个特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以参考下2023-05-05
小编这次要给大家分享的是如何实现vue2.x数组劫持，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获2023-01-01
这篇文章主要为大家详细介绍了vue移动端城市三级联动组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最新评论