路径配置陷阱分析

1. 资源文件放置位置不当

2. 路径引用错误

3. Webpack配置问题

Vue CLI项目使用Webpack进行打包构建。如果Webpack的配置不正确,可能会导致静态资源路径错误。

解决方案

1. 确保资源文件放置正确

将所有静态资源文件放在src/assets目录下,并确保在构建过程中没有被移动。

2. 正确引用图片路径

  • 使用requireimport语句:
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: '' },
    ]),
  ],
};

总结