Vue项目not allowed to load local reso

urce问题怎么解决？

这个问题可能是因为你在Vue项目中使用了本地资源（比如图片、字体等），而浏览器默认是不允许加载本地资源的，为了解决这个问题，你可以将本地资源放在public文件夹中，然后通过相对路径来引用它们。

如果你仍然遇到了这个问题，可以尝试在webpack配置文件中添加以下代码：

module.exports = {
  // ...其他配置
  devServer: {
    // ...
    // 允许加载本地资源
    // 这个配置可以解决Chrome浏览器中的问题，但是在其他浏览器中可能还是会有问题
    // 可以根据需要进行调整
    disableHostCheck: true
  }
}

希望能帮到你！

相关问题

vue Not allowed to load local resource:

在Vue中，当我们使用相对路径引用本地资源时，可能会出现"Not allowed to load local resource"的错误。这是因为浏览器默认情况下不允许从本地文件系统加载资源。为了解决这个问题，我们可以使用绝对路径或将本地资源放在public文件夹中。

以下是两种解决方法：

1.使用绝对路径

可以使用绝对路径来引用本地资源。例如，如果你的图片在C盘的根目录下，你可以这样引用它：

<img src="file:///C:/image.jpg">

请注意，这种方法只适用于本地开发环境，不适用于生产环境。

2.将本地资源放在public文件夹中

将本地资源放在public文件夹中，可以避免"Not allowed to load local resource"的错误。在Vue中，public文件夹是一个静态资源文件夹，里面的文件可以直接通过相对路径引用。

例如，如果你的图片在public文件夹的img子文件夹中，你可以这样引用它：

<img src="./img/image.jpg">

vue中Not allowed to load local resource: file:

在Vue中，当你尝试加载本地资源时，会出现"Not allowed to load local resource"的错误。这是因为浏览器的安全策略限制了从本地文件系统加载资源。

为了解决这个问题，你可以通过以下方式之一来加载本地资源：

1. 使用相对路径：确保你的资源文件位于项目的公共目录（如`public`文件夹）中，并使用相对路径来引用它们。例如，如果你有一个图片文件`logo.png`位于`public/images`目录中，你可以使用`<img src="/images/logo.png">`来加载它。

2. 导入资源：如果你正在使用Webpack或类似的构建工具，可以将本地资源导入到Vue组件中并以变量的形式使用。例如，在Vue组件中，你可以导入图片并将其赋值给一个变量，然后在模板中使用该变量。这样可以避免直接加载本地资源。

// 在组件中导入本地资源
import logo from '@/assets/logo.png';

export default {
  data() {
    return {
      logoImage: logo
    };
  }
}

<!-- 在模板中使用导入的资源 -->
<img :src="logoImage" alt="Logo">

请注意，这种方式需要构建过程，并且资源文件将被打包到构建后的输出目录中。

总之，避免直接加载本地文件系统中的资源是一个良好的实践，因为它可以帮助你的应用程序更好地适应不同环境和部署方式。