东阳市城建设局网站,网站运营需要服务器吗,广州平面设计招聘,网站如何做seo推广目录
静态资源可以通过两种方式进行处理#xff1a;
URL 转换规则
public 文件夹
何时使用 public 文件夹
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中#xff0c;资源链接会被自动注入。另外#xff0c;Vue CLI 也会自动注入 re…目录
静态资源可以通过两种方式进行处理
URL 转换规则
public 文件夹
何时使用 public 文件夹
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中资源链接会被自动注入。另外Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时)) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接
静态资源可以通过两种方式进行处理 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝而不会经过 webpack 的处理。
从相对路径导入 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时该资源将会被包含进入 webpack 的依赖图中。在其编译过程中所有诸如 img src...、background: url(...) 和 CSS import 的资源 URL 都会被解析为一个模块依赖。
例如
url(./image.png)
会被翻译为
require(./image.png)
而
img src./image.png
将会被编译到
h(img, { attrs: { src: require(./image.png) }})在其内部我们通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径再用 url-loader 将小于 4kb 的资源内联以减少 HTTP 请求的数量。
你可以通过 chainWebpack 调整内联文件的大小限制。
URL 转换规则 如果 URL 是一个绝对路径 (例如 /images/foo.png)它将会被保留不变。 如果 URL 以 . 开头它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。 如果 URL 以 ~ 开头其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源
img src~some-npm-package/foo.png如果 URL 以 开头它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 projectRoot/src 的别名 。(仅作用于模版中)
public 文件夹 任何放置在 public 文件夹的静态资源都会被简单的复制而不经过 webpack。你需要通过绝对路径来引用它们。
注意我们推荐将资源作为你的模块依赖图的一部分导入这样它们会通过 webpack 的处理并获得如下好处
脚本和样式表会被压缩且打包在一起从而避免额外的网络请求。 文件丢失会直接在编译时报错而不是到了用户端才产生 404 错误。 最终生成的文件名包含了内容哈希因此你不必担心浏览器会缓存它们的老版本。 public 目录提供的是一个应急手段当你通过绝对路径引用它时留意应用将会部署到哪里
何时使用 public 文件夹
你需要在构建输出中指定一个文件的名字。 你有上千个图片需要动态引用它们的路径。 有些库可能和 webpack 不兼容这时你除了将其用一个独立的 script 标签引入没有别的选择。
