vue.config.js配置 静态资源

在vue.config.js中配置处理static文件夹下的静态文件的方法是通过使用chainWebpack进行配置。首先，需要在vue.config.js文件中添加以下代码：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('static')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'static/[name].[hash:8].[ext]'
      })
  }
}

这段代码会通过file-loader将静态文件复制到输出目录，并为每个文件生成一个哈希值作为文件名的一部分。文件会被放置在static文件夹下，可以根据需要修改输出路径和文件名的格式。

如果在执行打包命令时出现index.html文件重复的错误，可以使用vue-cli的默认配置即可解决问题。默认的entry文件是src/main.js，所以可以删除pages配置项。只有在项目有多个入口的情况下才需要使用pages配置多个入口。

需要注意的是，如果有多个入口文件，可以使用pages配置来进行单页面打包。在配置入口文件时，按照以下形式进行配置：

pages: {
  index: {
    entry: 'src/index/main.js',
    template: 'public/index.html',
    filename: 'index.html',
    title: 'Index Page',
    chunks: ['chunk-vendors', 'chunk-common', 'index']
  }
}

在这个配置中，entry指定了入口文件的路径，template指定了模板文件的路径，filename指定了输出文件的名称，title指定了浏览器标签页的标题，chunks指定了页面中包含的块。可以根据项目的需要自定义这些配置项。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [如何配置vue.config.js 处理static文件夹下的静态文件](https://download.csdn.net/download/weixin_38711110/12925402)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue.config.js打包配置](https://blog.csdn.net/web22050702/article/details/127570402)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]