lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增：vue cli3的webpack配置和布局技巧文章

This commit is contained in:
xugaoyi 2020-02-22 17:22:17 +08:00
parent afa65ae2ea
commit 680a183149
12 changed files with 176 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vuepress/config.js
View File

@ -2,7 +2,7 @@ const nav = require('./config/nav.js');
const sidebar = require('./config/sidebar-auto.js');
module.exports = {
title: 'Evan Blog', // 标题
title: "Evan's blog", // 标题
description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到当前页面的 HTML 中
// base: '/blog/', //默认'/' || github仓库名'/<仓库名>/',
head: [ // 注入到当前页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]

2
docs/.vuepress/config/nav.js
View File

@ -12,6 +12,7 @@ module.exports = [
{text: '《ES6 教程》笔记', link: '/pages/f344d070a1031ef7/'},
{text: '《Vue》笔记', link: '/pages/114158caa9e96df0/'},
{text: '《TypeScript 从零实现 axios》', link: '/pages/e05dce83e5129785/'},
{text: '小程序笔记', link: '/pages/236ec09c26876b59/'},
]}
]
},
@ -32,7 +33,6 @@ module.exports = [
{text: '其他',
items: [
{text: '学习', link: '/pages/a8692ab3bdcb4588/'},
{text: '笔记', link: '/pages/236ec09c26876b59/'},
{text: '面试', link: '/pages/aea6571b7a8bae86/'},
{text: '心情杂货', link: '/pages/2d615df9a36a98ed/'},
{text: '学习网站', link: '/pages/2e9ba3fa6e1ed0e9/'},

6
docs/.vuepress/config/sidebar-auto.js
View File

@ -2,13 +2,13 @@
// 侧边栏自动生成
module.exports = {
"/01.前端/": [{"title":"学习笔记","collapsable":false,"children":[["10.学习笔记/00.《JavaScript教程》笔记.md","《JavaScript教程》笔记"],["10.学习笔记/10.《ES6 教程》笔记.md","《ES6 教程》笔记"],["10.学习笔记/20.《Vue》笔记.md","《Vue》笔记"],["10.学习笔记/30.《TypeScript 从零实现 axios》.md","《TypeScript 从零实现 axios》"]]},{"title":"JavaScript文章","collapsable":false,"children":[["25.JavaScript文章/01.数据类型转换.md","数据类型转换"],["25.JavaScript文章/02.new命令原理.md","new命令原理"],["25.JavaScript文章/03.ES5面向对象.md","ES5面向对象"],["25.JavaScript文章/04.ES6面向对象.md","ES6面向对象"],["25.JavaScript文章/05.JavaScript中的名词概念.md","JavaScript中的名词概念"],["25.JavaScript文章/06.多种数组去重性能对比.md","多种数组去重性能对比"],["25.JavaScript文章/50.js随机打乱数组.md","js随机打乱数组"],["25.JavaScript文章/60.判断是否为移动端浏览器.md","判断是否为移动端浏览器"]]},{"title":"Vue文章","collapsable":false,"children":[["30.Vue文章/10.初始化vue项目要做的一些工作.md","初始化vue项目要做的一些工作"]]}],
"/01.前端/": [{"title":"学习笔记","collapsable":false,"children":[["10.学习笔记/00.《JavaScript教程》笔记.md","《JavaScript教程》笔记"],["10.学习笔记/10.《ES6 教程》笔记.md","《ES6 教程》笔记"],["10.学习笔记/20.《Vue》笔记.md","《Vue》笔记"],["10.学习笔记/30.《TypeScript 从零实现 axios》.md","《TypeScript 从零实现 axios》"],["10.学习笔记/40.小程序笔记.md","小程序笔记"]]},{"title":"JavaScript文章","collapsable":false,"children":[["25.JavaScript文章/01.数据类型转换.md","数据类型转换"],["25.JavaScript文章/02.new命令原理.md","new命令原理"],["25.JavaScript文章/03.ES5面向对象.md","ES5面向对象"],["25.JavaScript文章/04.ES6面向对象.md","ES6面向对象"],["25.JavaScript文章/05.JavaScript中的名词概念.md","JavaScript中的名词概念"],["25.JavaScript文章/06.多种数组去重性能对比.md","多种数组去重性能对比"],["25.JavaScript文章/50.js随机打乱数组.md","js随机打乱数组"],["25.JavaScript文章/60.判断是否为移动端浏览器.md","判断是否为移动端浏览器"]]},{"title":"Vue文章","collapsable":false,"children":[["30.Vue文章/10.初始化vue项目要做的一些工作.md","初始化vue项目要做的一些工作"],["30.Vue文章/20.Vue CLi3 修改webpack配置.md","Vue CLi3 修改webpack配置"]]}],
"/02.页面/": [{"title":"HTML","collapsable":false,"children":[["10.HTML/10.常用meta整理.md","常用meta整理"]]},{"title":"CSS","collapsable":false,"children":[["20.CSS/01.flex布局语法.md","flex布局语法"],["20.CSS/02.flex布局案例-基础.md","flex布局案例-基础"],["20.CSS/03.flex布局案例-骰子.md","flex布局案例-骰子"],["20.CSS/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局"],["20.CSS/05.flex布局案例-网格布局.md","flex布局案例-网格布局"],["20.CSS/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局"],["20.CSS/07.CSS3之transform过渡.md","CSS3之transform过渡"],["20.CSS/08.CSS3之animation动画.md","CSS3之animation动画"]]}],
"/02.页面/": [{"title":"HTML","collapsable":false,"children":[["10.HTML/10.常用meta整理.md","常用meta整理"]]},{"title":"CSS","collapsable":false,"children":[["20.CSS/01.flex布局语法.md","flex布局语法"],["20.CSS/02.flex布局案例-基础.md","flex布局案例-基础"],["20.CSS/03.flex布局案例-骰子.md","flex布局案例-骰子"],["20.CSS/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局"],["20.CSS/05.flex布局案例-网格布局.md","flex布局案例-网格布局"],["20.CSS/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局"],["20.CSS/07.CSS3之transform过渡.md","CSS3之transform过渡"],["20.CSS/08.CSS3之animation动画.md","CSS3之animation动画"],["20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md","「布局技巧」图片未加载前自动撑开元素高度"]]}],
"/03.技术/": [{"title":"技术文档","collapsable":false,"children":[["01.技术文档/01.Git使用手册.md","Git使用手册"],["01.技术文档/02.Markdown使用教程.md","Markdown使用教程"],["01.技术文档/03.npm常用命令.md","npm常用命令"],["01.技术文档/04.yaml语言教程.md","yaml语言教程"]]},{"title":"GitHub","collapsable":false,"children":[["02.GitHub/01.GitHub高级搜索技巧.md","GitHub高级搜索技巧"],["02.GitHub/02.GitHub Actions 实现自动部署静态博客.md","GitHub Actions 实现自动部署静态博客"],["02.GitHub/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md","GitHub Actions 定时运行代码：每天定时百度链接推送"]]},{"title":"Nodejs","collapsable":false,"children":[["03.Nodejs/01.nodejs递归读取所有文件.md","nodejs递归读取所有文件"]]},{"title":"博客搭建","collapsable":false,"children":[["04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md","解决百度无法收录搭建在GitHub上的个人博客的问题"],["04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md","使用Gitalk实现静态博客无后台评论系统"],["04.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md","GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床"]]}],
"/04.其他/": [{"title":"学习","collapsable":false,"children":[["01.学习/02.提高学习效率的策略.md","提高学习效率的策略"],["01.学习/03.提高记忆的技巧.md","提高记忆的技巧"],["01.学习/04.自律小建议.md","自律小建议"],["01.学习/05.处理问题的思路.md","处理问题的思路"]]},{"title":"笔记","collapsable":false,"children":[["02.笔记/01.小程序笔记.md","小程序笔记"]]},{"title":"面试","collapsable":false,"children":[["03.面试/01.面试问题集锦.md","面试问题集锦"]]},{"title":"英语","collapsable":false,"children":[["04.英语/01.英语基础.md","英语基础"]]},{"title":"心情杂货","collapsable":false,"children":[["05.心情杂货/01.一个完美主义者的自我救赎.md","一个完美主义者的自我救赎"]]},["97.学习网站.md","学习网站"],["98.在线工具.md","在线工具"],["99.友情链接.md","友情链接"]],
"/04.其他/": [{"title":"学习","collapsable":false,"children":[["01.学习/02.提高学习效率的策略.md","提高学习效率的策略"],["01.学习/03.提高记忆的技巧.md","提高记忆的技巧"],["01.学习/04.自律小建议.md","自律小建议"],["01.学习/05.处理问题的思路.md","处理问题的思路"]]},{"title":"面试","collapsable":false,"children":[["03.面试/01.面试问题集锦.md","面试问题集锦"]]},{"title":"英语","collapsable":false,"children":[["04.英语/01.英语基础.md","英语基础"]]},{"title":"心情杂货","collapsable":false,"children":[["05.心情杂货/01.一个完美主义者的自我救赎.md","一个完美主义者的自我救赎"]]},["97.学习网站.md","学习网站"],["98.在线工具.md","在线工具"],["99.友情链接.md","友情链接"]],
"/05.关于/": [["01.关于.md","关于"]],

0
docs/04.其他/02.笔记/01.小程序笔记.md → docs/01.前端/10.学习笔记/40.小程序笔记.md
View File

122
docs/01.前端/30.Vue文章/20.Vue CLi3 修改webpack配置.md Normal file
View File

@ -0,0 +1,122 @@
---
title: Vue CLi3 修改webpack配置
date: 2020-02-22
permalink: /pages/5d463fbdb172d43b
---
# Vue CLi3 修改webpack配置
## 审查项目的 webpack 配置
因为 `@vue/cli-service` 对 webpack 配置进行了抽象，当你想查看webpack的配置时可以使用 `inspect`命令：
```sh
vue inspect # 在终端打印 webpack配置信息
```
```sh
vue inspect > output.js # 把webpack配置信息生成到output.js文件
```
注意，`output.js` 文件不是一个有效的 webpack 配置文件，仅用于审查。
## 修改webpack配置
以**修改路径别名**为例：
1. 项目根目录创建文件 `vue.config.js`
2. 参考如下代码修改路径别名：
```js
// vue.config.js
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('styles', resolve('src/assets/styles'))
}
}
```
## 参考
* [官方文档](https://cli.vuejs.org/zh/guide/webpack.html)
* [官方 vue.config.js 参数说明](https://cli.vuejs.org/zh/config/#vue-config-js)
* [vue.config.js 设置接口代理示例](https://github.com/ustbhuangyi/vue-music/blob/master/vue.config.js)
* 配置示例：
```js
const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ProxyAgent = require('proxy-agent')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
runtimeCompiler: true,
assetsDir: 'static',
productionSourceMap: false, // 生产环境的 source map
parallel: require('os').cpus().length > 1,
configureWebpack: config => {
// 公共配置
// cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'vuex': 'Vuex',
'axios': 'axios'
}
config.resolve.alias = Object.assign({}, config.resolve.alias, {
'src': resolve('src/common'),
'common': resolve('src/views/common'),
'static': resolve('static')
})
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.optimization = {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true, // console
drop_debugger: false,
pure_funcs: ['console.log']// 移除console
}
}
})
]
}
} else {
// 为开发环境修改配置...
}
},
css: {
loaderOptions: {
css: {
importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理）
}
}
},
devServer: {
port: 80,
disableHostCheck: true, // 可使用本地host配置的域名访问
proxy: {
'/api': {
agent: new ProxyAgent('http://132.128.11.12'),
target: 'http://132.128.11.12',
ws: false,
changeOrigin: true
}
}
}
}
```

39
docs/02.页面/20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md Normal file
View File

@ -0,0 +1,39 @@
---
title: 「布局技巧」图片未加载前自动撑开元素高度
date: 2020-02-22
permalink: /pages/3d52574260725aea
---
# 「布局技巧」图片未加载前自动撑开元素高度
在移动端开发中，有一些元素是根据图片高度来自动撑开的 ，高度不能写死（如轮播图的外层元素），在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。
这种情况我们可以设置如下样式来设置该元素的高度：
```stylus
.wrapper
overflow hidden
width 100%
height 0
padding-bottom 26.66% // 这个数值是图片的高宽比，即 高/宽
background #eee
```
上面代码中，`padding-bottom` 的取值是图片的高宽比（即，高/宽），它会根据 `width`值的`26.66%`计算，最终元素的高度会和图片加载完成后的高度一致。
也可以使用`vw`法，但在一些浏览器可能有兼容性问题：
```stylus
.wrapper
width 100%
height 26.66vw
background #eee
```
`vw`，viewpoint width，视窗宽度，1vw=视窗宽度的1%
`vh`，viewpoint height，视窗高度，1vh=视窗高度的1%
更多 [CSS单位](https://www.runoob.com/cssref/css-units.html)。

2
docs/04.其他/04.英语/20.测试在线新增文章.md
View File

@ -1,2 +0,0 @@
# 测试在线新增文章
> 这是一个测试文件

2
docs/04.其他/04.英语/200.test.md
View File

@ -1,2 +0,0 @@
# 测试在线新增文章
> 这是一个测试文件

6
docs/04.其他/98.在线工具.md
View File

@ -12,6 +12,12 @@ permalink: /pages/9c2232288caaa8ec
| codepen | <https://codepen.io> | 在线代码编辑与演示 |
| codesandbox | <https://codesandbox.io/> | 用于快速Web开发的在线IDE |
## 字体图标
| 名称 | 网址 | 描述 |
| -------- | -------------------------- | ------------------ |
| iconfont | <https://www.iconfont.cn/> | 阿里巴巴矢量图标库 |
## Emoji表情
| 名称 | 网址 | 描述 |

2
docs/04.其他/99.友情链接.md
View File

@ -18,7 +18,7 @@ permalink: /pages/844eea1b2387fb96
与我[ 联系 ](/pages/81d9f505441078e0/#联系)或者 在本页面评论区留言您的友链信息，格式：
::: tip
昵称：Evan blog
昵称：Evan's blog
链接：<https://xugaoyi.com/>

2
docs/05.关于/01.关于.md
View File

@ -6,7 +6,7 @@ sidebar: false
---
# 关于
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者[交换友链](/pages/844eea1b2387fb96/)。
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。
博主，从事Web前端开发工作，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓

4
docs/index.md
View File

@ -1,6 +1,6 @@
---
home: true
heroText: Evan Blog
heroText: Evan's blog
tagline: Web前端技术博客，积跬步以至千里，致敬每个爱学习的你。
features:
@ -23,7 +23,7 @@ footer:
---
# 简介
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术（[最新](/pages/8818d4830dac5e2a/)）。如果你喜欢这个博客欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取源码，或者[交换友链](/pages/844eea1b2387fb96/)。
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术（[最新](/pages/8818d4830dac5e2a/)）。如果你喜欢这个博客欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。
</br>