路径配置陷阱分析
1. 资源文件放置位置不当
2. 路径引用错误
3. Webpack配置问题
Vue CLI项目使用Webpack进行打包构建。如果Webpack的配置不正确,可能会导致静态资源路径错误。
解决方案
1. 确保资源文件放置正确
将所有静态资源文件放在src/assets
目录下,并确保在构建过程中没有被移动。
2. 正确引用图片路径
- 使用
require
或import
语句:
const bannerImg = [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')];
- 使用别名:
<img src="~assets/banner1.jpg">
- 使用
@/
符号:
<img src="@/assets/banner2.jpg">
3. 修改Webpack配置
如果Webpack配置导致路径错误,可以尝试以下方法:
- 修改
webpack.config.js
文件,确保静态资源路径正确。 - 使用
alias
属性为@
设置别名:
resolve: {
alias: {
'@': resolve('src'),
},
},
- 在
output
配置中设置publicPath
属性:
output: {
publicPath: '/',
},
4. 使用copy-webpack-plugin
插件
如果静态资源文件放在public
目录下,可以使用copy-webpack-plugin
插件将其复制到dist
目录中,保持目录结构一致。
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// ...
plugins: [
new CopyWebpackPlugin([
{ from: 'public', to: '' },
]),
],
};