web前端之vue动态访问静态资源、静态资源的动态访问、打包、public、import、URL、Vite

在Vue项目中，有多种方式可以动态访问静态资源，包括使用public文件夹、通过import语句、构建时的URL别名等。

1. public文件夹：Vue CLI创建的项目中，public文件夹用于放置不会被Webpack处理的静态资源。在index.html或通过<img>、<script>、<link>标签引用的资源会被直接复制到项目的dist文件夹。
2. import: 可以使用ES6的import语句来导入静态资源。Webpack会处理这些模块，并可能将它们内联或者做其他优化。
3. URL别名：在Vue项目中，可以通过Webpack配置文件(vue.config.js)设置别名，如@通常用于src目录。

例如，在vue.config.js中配置别名：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
};

然后在组件中使用别名：

import MyComponent from '@/components/MyComponent.vue';

4. 动态访问：如果需要在运行时动态构造资源的URL，可以使用Vue实例的$router对象和require函数。

例如，动态访问一个图片资源：

<template>
  <img :src="imageUrl" />
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/logo.png')
    };
  }
};
</script>

以上方法可以根据项目需求灵活使用，以确保静态资源的正确访问和优化。