vue-loader

查看文档
Vue Loader 是一个 webpack 的 loader(在vue-cli中已自动集成)，以下功能都依赖于Vue Loader:

单文件组件(.vue)
Sass语法
scoped功能
将 <style> 和 <template> 中引用的资源当作模块依赖来处理
开发热重载

处理资源路径

当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。因此动态添加/更改的资源非绝对路径需要使用require处理。

<img src="../image.png">
<!-- 将会被编译为 -->
createElement('img', {
  attrs: {
    src: require('../image.png') // 现在这是一个模块的请求了
  }
})

默认下列标签/特性的组合会被转换，且这些组合时可以使用 transformAssetUrls 选项进行配置的。
( 如配置额外的 <style> 块使用 css-loader，也可以使 CSS 中的资源 URL 变成模块请求。)

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

转换规则
- 如果路径是绝对路径或相对虚拟目录 (例如 /images/foo.png)，会原样保留，不做处理。
- 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
- 如果路径以 @ 开头，也会被看作模块依赖。可通过 webpack.base.conf 配置给各种路径配置 alias。vue-cli 创建的项目都默认配置了将 @ 指向 /src。
- 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以将其视为相对路径./，也可以引用一个 node_modules中的资源：@import '~bootstrap-styl/bootstrap/index.styl';
资源转模块方式
- file-loader 允许指定要复制和放置资源文件的位置，并使用版本哈希命名以获得更好的缓存，且允许使用相对路径而不用担心部署时 URL 的问题。
- url-loader 允许将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

预处理器

Vue Loader 会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的其他 loader。

Scoped CSS

scoped 通过使用 PostCSS 实现了以下转换：

<style scoped>
.example {
  color: red;
}
</style>
<template>
  <div class="example">hi</div>
</template>
<!-- 将会被编译为 -->
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

父子组件关系
使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。
如果需要渗透到子组件，可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>
<!-- 上述代码将会编译成：-->
.a[data-v-f3f3eg9] .b { /* ... */ }

有些预处理器对>>>不支持，此时可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名。

通过 v-html 创建的 DOM 内容不受 scoped 样式影响，需通过深度作用选择器设置样式。

热重载

当编辑一个组件的 <template> 时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。
当编辑一个组件的 <script> 时，这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 <script> 可能包含带有副作用的生命周期钩子，所以将重新渲染替换为重新加载是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。
<style> 会通过 vue-style-loader 自行热重载，所以它不会影响应用的状态。

vue-cli3

下载vue-cli3创建项目

npm install -g @vue/cli@3.0.0
vue create my-project (名称不能出现大写)

或直接

npx vue create my-vue-app

NODE_ENV获取环境变量

let env = app.get('env')
let env = process.env.NODE_ENV

可自行在 process.env 对象下定义需要使用的变量
一般约定 NODE_ENV 为环境变量名称
在项目中可以根据不同环境值进行差异化配置

Vue项目中使用

在vue-cli3构建的项目中,默认num run start环境值为development , num run build环境值为production,当需要其他环境时,可安装cross-env插件

npm install cross-env --save

并在package.json中进行如下配置

"test":"cross-env cross-env NODE_ENV=test  npm run build"

则npm run test时,获取的环境值即为test

还需要NODE_ENV以外的环境变量（只能以VUE_APP开头），可以通过.env.XXX文件配合使用

配置文件

在根目录下创建vue.config.js中进行配置

禁用打包后的sourceMap，防止源码泄露

productionSourceMap:false

配置开发环境参数

  devServer: {
    port: 1881,//设置端口
  }

导入公共scss文件

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/_variable.scss";`
      }
    }
  },

vue-loader与vue-cli3