vue 打包包含assets下所有资源

在Vue中，打包包含assets文件夹下的所有资源可以通过配置webpack来实现。

首先，在项目根目录下找到vue.config.js文件（如果没有该文件，需要手动创建），在该文件中添加以下代码：

module.exports = {
  chainWebpack: config => {
    // 配置webpack，将assets文件夹下的所有资源都打包进最终的文件中
    config.module
      .rule('assets')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192,
        name: 'assets/[name].[hash:8].[ext]'
      })
      .end()
  }
}

上述代码通过使用url-loader将assets文件夹下的图片资源打包到最终的文件中。其中，test字段指定了文件类型，options字段指定了打包后的图片名称和路径。

接着，在项目的入口文件（一般是main.js）中引入assets文件夹下的资源：

import logo from '@/assets/logo.png'

最后，在Vue组件中使用引入的资源：

<template>
  <div>
    <img src="logo" alt="Logo">
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

这样配置后，在打包时，assets文件夹下的所有资源都会被打包进最终的文件中，可以直接在Vue组件的template中使用。