Vue后台url正确的资产路径答案

【问题标题】：Vue background url correct asset pathVue后台url正确的资产路径
【发布时间】：2020-06-22 13:15:30
【问题描述】：

我创建了一个新的 vue 应用程序，我想在 div 背景上加载图像。以下作品

background: url('~../assets/my_image.png');

我的应用程序使用 webpack 和 vue-loader 吗？我在 package.json 上找不到模块。为什么我需要添加〜？这会在 dist 目录上进行资产编译后工作吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

基本上是的。您的应用程序使用 Webpack 和几个不同的文件加载器。这些都是 Vue 库的一部分。

假设你在 src 目录中创建了一个 assets 目录，波浪号告诉 Webpack 如何重写文件路径。

$ npm run build 将编译所有内容并将其添加到dist 目录中，以便您验证如何处理路径。

如果您不希望 Webpack 处理您的资产，您可以将内容添加到 public 目录，该目录将直接复制到 dist 并成为您服务器上的根目录或 /。

【讨论】：

【解决方案2】：

我对 vue 不是很熟悉，但我假设您使用的是类似于 react-create app 的模板，因此您会问您是否使用 babel、webpack 或其他加载器/包。

如果情况是我上面提到的，那么是的，你正在使用 webpack。建议研究如何构建模板。

对于波浪号协会，我认为这些链接可能会有所帮助：

【讨论】：