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";`
}
}
},
