接下来我将详细讲解“详解vue静态资源打包中的坑与解决方案”的完整攻略。
一、问题描述
在Vue开发中,经常需要使用一些静态资源,如图片、字体等。但是,当我们将Vue项目打包后,这些静态资源文件在文件系统中的路径就会变化,这就会导致引用不到这些资源从而导致网页无法正确显示。
二、原因分析
静态资源路径问题通常由Webpack打包机制引起的。Webpack 在将代码打包压缩时,会基于“依赖图谱”来决定每个依赖项在 bundle 中的位置,因此在处理静态资源路径时也会遵循这一机制。具体来说,当Webpack在处理代码中的静态资源引用时,会将资源从源代码路径中复制到打包文件夹中,并在HTML文件中自动插入相应的路径,但是默认情况下它并不支持在index.html指定contextRoot,需要手动配置。
三、解决方案
我们可以通过以下两种方式来解决这个问题。
方案一:使用vue.config.js中的publicPath属性
Vue Cli 3.x默认把静态资源存放在public文件夹中,因此我们可以通过设定publicPath来更好地处理静态资源路径。publicPath是一个在 index.html中引入的公共路径,它也会在构建之前被插入到所有(URL)里面。具体操作方式如下:
- 在Vue工程目录下新建vue.config.js文件,内容如下:
module.exports = {
publicPath: './',
}
- 使用正斜杠代替相对路径
一旦设定了publicPath为./,在 HTML、CSS、JS 文件中的相对路径(../../xxx.css)都会被解析为(./../../xxx.css)。因此,我们在引用静态资源时只需使用正斜杠代替相对路径即可:
<img src="/assets/logo.png" alt="logo">
方案二:将所有静态资源放入assets文件夹中
这是另一种推荐的做法,我们可以将所有静态资源都放在assets文件夹下,通过assets/js、assets/css、assets/images这样的目录结构来管理这些资源,同时在构建时加入对应的Webpck loader来编译、压缩这些资源。这种方法的好处是可以方便地统一管理静态资源文件,并且可以更好地避免资源路径问题。
具体操作如下:
-
在 Vue 工程目录下,创建assets文件夹
-
在assets/js、assets/css、assets/images目录下分别添加js、css和图片文件
-
在vue.config.js中添加loader配置,这里以压缩图片的loader为例
let path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
disable: true,
mozjpeg: {
progressive: true,
quality: 75
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.75, 0.9],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
}
]
}
]
}
}
}
四、总结
通过以上两种方法,我们可以很好的解决Vue静态资源路径打包问题。但是需要注意的是,如果我们使用了相对路径,那么在部署时,我们需要确保部署到的目录与路径是一致的。因此,在使用Vue进行开发时,我们应该尽量避免使用相对路径。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解vue静态资源打包中的坑与解决方案 - Python技术站