本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-02-26
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest) 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。
因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：
<%= VALUE %> 用来做不转义插值；<%- VALUE %> 用来做 HTML 转义插值；<% expression %> 用来描述 JavaScript 流程控制。除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。
<!-- 这里的 BASE_URL 是设置的客户端环境变量 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preload"> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。
<link rel="prefetch"> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
具体查看： Vue CLI
静态资源可以通过两种方式进行处理：
在 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 调整内联文件的大小限制：
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 10240 }))
}
}
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀；
1、在 public/index.html 通过插值来解决，如上面提到的<%= BASE_URL %>。
2、在模板中，你需要向你的组件传入基础 URL：
<template>
<div>
<img :src="`${publicPath}my-image.png`">
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
publicPath: process.env.BASE_URL
}
}
}
</script>
注： 上面提到的BASE_URL都是在环境变量中声明的。
如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。
如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源，引用一个 npm 依赖中的文件；
如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 /src 的别名 @。(仅作用于模版中)
用 vue-cli3 框架的时候对于常用的 less 、sass 变量都是需要时就在单文件中引入文件
<template>
<div class="main"></div>
</template>
<style lang="less">
/* 需要在这里引入才能使用变量 */
@import '/src/assets/style/variable.less';
.main {
color: @txt-color;
}
</style>
也可以使用配置全局的 less 、sass 变量
# 安装插件
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
配置 less 全局变量
module.exports = {
// ...
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
resolve(__dirname, '/src/assets/styles/variable.less'),
],
},
},
}
配置 sass 全局变量
module.exports = {
// ...
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @ 是 src 的别名
// 注意：在 sass-loader v7 中，这个选项名是 "data"
prependData: `@import "~@/variables.scss";`
},
less: {
globalVars: {
primary: '#fff', // 全局变量
}
}
}
},
}
另外，需要了解的有，CSS Modules相关配置，CSS Modules 基本用法
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对：
FOO=bar
VUE_APP_SECRET=secret
BASH_URL='/api/'
被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。
需要注意的是， 加载变量的时候，.env.production 将会比一般的环境文件 .env 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用；
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。在构建的过程中，process.env.VUE_APP_SECRET的值就会被替换成定义的值。
这里的意思是指，应用代码中
if (process.env.VUE_APP_SECRET === "secret") {
// todo
}
// 在.env设置 VUE_APP_SECRET=secret 实际构建完之后，这行代码就是这样的
if ("secret" === "secret") {
// todo
}
除此之外，在你的应用代码中始终可用的还有两个特殊的变量：
vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。