vue 新建static 需要配置吗

在 Vue 项目中新建 `static` 目录是不需要任何额外配置的。`static` 目录下的文件会被直接复制到构建后的 `dist` 目录中，可以直接通过相对路径访问。

例如，如果在 `static` 目录下新建了一个 `images` 文件夹，并在其中添加了一张名为 `logo.png` 的图片，那么在 Vue 项目中，可以通过以下方式访问这张图片：

<template>
  <div>
    <img src="./static/images/logo.png" alt="logo">
  </div>
</template>

在上述代码中，`"./static/images/logo.png"` 是相对于当前组件的路径，这样就可以正确地加载图片了。

相关问题

若依vue版本兼容ie配置

若依是一个基于Vue的前端框架，它可以通过配置来兼容IE。以下是在若依中配置IE兼容的步骤：

1. 安装依赖

使用以下命令安装若依项目需要的依赖：

npm install --save-dev babel-polyfill
npm install --save-dev @babel/plugin-transform-runtime

2. 修改babel.config.js

若依使用的是babel 7，你需要在项目根目录下新建`babel.config.js`文件，并添加以下内容：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        'absoluteRuntime': false,
        'corejs': false,
        'helpers': true,
        'regenerator': true,
        'useESModules': false
      }
    ]
  ]
}

3. 修改main.js

在`src/main.js`中添加以下代码：

import 'babel-polyfill'

4. 配置webpack

在`vue.config.js`中添加以下配置：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: true,
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    entry: ['babel-polyfill', './src/main.js']
  }
}

5. 配置IE兼容

在`public/index.html`中添加以下代码：

<!-- 兼容IE -->
<script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.min.js"></script>
<script>
  if (!Object.assign) {
    Object.defineProperty(Object, 'assign', {
      enumerable: false,
      configurable: true,
      writable: true,
      value: function(target) {
        'use strict';
        if (target === undefined || target === null) {
          throw new TypeError('Cannot convert first argument to object');
        }
        var to = Object(target);
        for (var i = 1; i < arguments.length; i++) {
          var nextSource = arguments[i];
          if (nextSource === undefined || nextSource === null) {
            continue;
          }
          nextSource = Object(nextSource);
          var keysArray = Object.keys(Object(nextSource));
          for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
            var nextKey = keysArray[nextIndex];
            var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
            if (desc !== undefined && desc.enumerable) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
        return to;
      }
    });
  }
</script>

以上就是在若依中配置IE兼容的步骤。

springboot+vue显示图片

在Spring Boot项目中，可以使用Spring Boot提供的静态资源处理机制来向Vue前端提供图片资源。首先，需要配置Spring Boot的静态资源目录，在application.properties中添加如下配置：

spring.resources.static-locations=classpath:/static/

在这个配置中，我们指定了静态资源的位置为“classpath:/static/”，也就是在Classpath下的static目录。在该目录下新建一个images目录，并在其中添加一张图片“test.jpg”。

接下来，在Vue的代码中通过axios请求Spring Boot的Restful API获取图片。代码如下：

<template>
  <img :src="imageUrl" alt="Test Image">
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  mounted() {
    axios.get('/api/images/test.jpg', { responseType: 'arraybuffer' })
      .then(res => {
        const blob = new Blob([res.data], { type: res.headers['content-type'] })
        this.imageUrl = URL.createObjectURL(blob)
      })
  }
}
</script>

在Vue中，通过mounted钩子函数发送一个GET请求，在请求中指定响应的数据类型是“arraybuffer”。当请求响应后，将响应数据转换成一个Blob对象，并将其转换成URL类型的图片地址，赋值给Vue实例的imageUrl属性。

最后，当Vue渲染完成后，可以在页面上看到图片的显示效果。