PAB旧备忘录

JohnsonGH
184 阅读17分钟

c"rrer ment"tion

说话的⽅方式与语⽓气 很多时候，改变说话的⽅方式与语⽓气，你的意⻅见就不不会被反对。

未来是⼀一个学习⼒力力的年年代，⽽而不不是学历的年年代。 学习的⼼心态能够使⼈人变得更更加敏敏锐，更更加谦逊。能够始终⽤用⼀一颗谦逊的⼼心来⾯面对⾃自 ⼰己能⼒力力的提⾼高，以及个⼈人成⻓长的问题。

你建了了⼀一个群，说明你有影响⼒力力，那是因为你的某些优点吸引着⼤大家，⼤大家因此希 望从你身上学到这些优点或者从中得到些什什么，或者仅仅是因为崇拜。但你不不能把 群当做⾃自⼰己家可以胡乱随⾃自⼰己性⼦子胡乱说话，胡乱⾏行行为，做⼀一些不不利利于

Chrome
1、设置浏览器器跨域:
第⼀一步:切换到 /Users/Johnson/Documents ⽬目录新建⽂文件夹 MyChromeDevUserD5t5
第⼆二步:
open -n /Applic5tions/Google\ Chrome.5pp/ --5rgs --dis5ble-web-security -- user-d5t5-dir=/Users/Johnson/Documents/MyChromeDevUserD5t5

加上解决报错:Google Chrome 解决 “您的连接不不是私密连接”
open -n /Applic5tions/Google\ Chrome.5pp/ --5rgs --dis5ble-web-security -- user-d5t5-dir=/Users/Johnson/Documents/MyChromeDevUserD5t5 --test-type --ignore-certific5te-errors

加上解决SSL证书过期:
chrome强制转跳https，删除对某个域名的强制转跳即可 hrome的地址栏输⼊入:chrome://net-intern5ls/#hsts
在Delete dom5in下输⼊入相对应的⽹网址，不不带htttp的，只需要www开头，接着按下 Delete即可

2、Chrome设置启⽤用ES6⽀支持
第⼀一步:地址栏输⼊入chrome://fl$gs/
第⼆二步:Experiment5l J5v5Script:启⽤用实验性 J5v5Script M5c, Windows, Linux, Chrome OS, Android 

Linux
cp ).txt dir // 拷⻉贝单个⽂文件到某个⽬目录

cp dir) dirb // 拷⻉贝整个⽬目录到⽬目标⽬目录下

Linux下解压命令⼤大全
.t)r
解包:t)r xvf FileN)me.t)r 打包:t)r cvf FileN)me.t)r DirN)me

.gz
解压: gunzip FileN)me.gz 压缩: gzip FileN)me

.t)r.gz 和 .tzg
解压: t)r zxvf FileN)me.t)r.gz
压缩: t)r zxvf FileN)me.t)r.gz DirN)me

.zip
解压: unzip FileN)me.zip
压缩: zip FileN)me.zip Dirn)me
例例⼦子:
zip -r myd)t).zip myd)t) #压缩myd)t)⽬目录
zip -r myd)t).zip mydir b.txt # 压缩⽬目录mydir和⽂文件b.txt成myd)t).zip zip ).txt.zip ).txt #压缩).txt⽂文件成).txt.zip

.r)r
解压:r)r x FileN)me.r)r 压缩:r)r ) FileN)me.r)r DirN)me

git ⽣生成ssh 密钥
⾸首先，检查下⾃自⼰己之前有没有已经⽣生成:
在开始菜单中打开git下的git b)sh(当然，在其他⽬目录下打开git b)sh也是⼀一样 的):
然后执⾏行行:
cd ~/.ssh
1
如果能进⼊入到.ssh⽂文件⽬目录下 ，则证明，之前⽣生成过.ssh秘钥，可以直接使⽤用⾥里里⾯面 的秘钥。
如果不不能进⼊入到.ssh⽂文件⽬目录下，则:
检测下⾃自⼰己之前有没有配置:git config user.n)me和git config user.em)il(直接 分别输⼊入这两个命令)
⼀一、如果之前没有配置过
1.配置

git config –glob)l user.n)me ‘xxxxx’
git config –glob)l user.em)il ‘xxx@xx.xxx’ 2.⽣生成秘钥
ssh-keygen -t rs) -C ‘上⾯面的邮箱’ 接着按3个回⻋车

最后在.ssh⽬目录下得到了了两个⽂文件:id_rs)(私有秘钥)和id_rs).pub(公有密钥) 如果想登陆远端，则需要将rs).pub⾥里里的秘钥添加到远端。
⼆二、如果之前配置过
则直接按上⼀一点中的 2.⽣生成秘钥 进⾏行行

Linux查找的命令主要有find和grep 区别:(1)find命令是根据⽂文件的属性进⾏行行查找，如⽂文件名，⽂文件⼤大⼩小，所有者，所 属组，是否为空，访问时间，修改时间等。

(2)grep是根据⽂文件的内容进⾏行行查找，会对⽂文件的每⼀一⾏行行按照给定的模式 (p)tter)进⾏行行匹配查找。

⼀一.find命令
基本格式:find p)th expression
1.按照⽂文件名查找
(1)find / -n)me httpd.conf #在根⽬目录下查找⽂文件httpd.conf，表示在 整个硬盘查找
(2)find /etc -n)me httpd.conf #在/etc⽬目录下⽂文件httpd.conf (3)find /etc -n)me '*srm*' #使⽤用通配符*(0或者任意多个)。表示在/ etc⽬目录下查找⽂文件名中含有字符串串‘srm’的⽂文件
(4)find . -n)me 'srm*' #表示当前⽬目录下查找⽂文件名开头是字符 串串‘srm’的⽂文件
2.按照⽂文件特征查找
(1)find / -)min -10 # 查找在系统中最后10分钟访问的⽂文件()ccess time)
(2)find / -)time -2 # 查找在系统中最后48⼩小时访问的⽂文件 (3)find / -empty # 查找在系统中为空的⽂文件或者⽂文件夹

⼆二、grep命令
基本格式:find expression

1.主要参数
[options]主要参数: -c:只输出匹配⾏行行的计数。 -i:不不区分⼤大⼩小写 -h:查询多⽂文件时不不显示⽂文件名。 -l:查询多⽂文件时只输出包含匹配字符的⽂文件名。 -n:显示匹配⾏行行及⾏行行号。 -s:不不显示不不存在或⽆无匹配⽂文本的错误信息。 -v:显示不不包含匹配⽂文本的所有⾏行行。 p5ttern正则表达式主要参数:
\: 忽略略正则表达式中特殊字符的原有含义。 ^:匹配正则表达式的开始⾏行行。

$: 匹配正则表达式的结束⾏行行。 \<:从匹配正则表达 式的⾏行行开始。 \>:到匹配正则表达式的⾏行行结束。
[ ]:单个字符，如[A]即A符合要求 。
[ - ]:范围，如[A-Z]，即A、B、C⼀一直到Z都符合要求 。 .:所有的单个字符。

* :有字符，⻓长度可以为0。
2.实例例
(1)grep 'test' d* #显示所有以d开头的⽂文件中包含 test的⾏行行
(2)grep ‘test’ )) bb cc #显示在))，bb，cc⽂文件中包含test的⾏行行 (3)grep ‘[)-z]\{5\}’ )) #显示所有包含每⾏行行字符串串⾄至少有5个连续⼩小写字符 的字符串串的⾏行行
(4)grep m)gic /usr/src #显示/usr/src⽬目录下的⽂文件(不不含⼦子⽬目录)包含 m)gic的⾏行行
(5)grep -r m)gic /usr/src #显示/usr/src⽬目录下的⽂文件(包含⼦子⽬目录)包含 m)gic的⾏行行
(6)grep -w p)ttern files :只匹配整个单词，⽽而不不是字符串串的⼀一部分(如匹 配’m)gic’，⽽而不不是’m)gic)l’)， 

Window History

1、window.history 对象包含浏览器器的历史。 为了了保护⽤用户隐私，对 J.v.Script 访问该对象的⽅方法做出了了限制。

history .pi可以分为两⼤大部分，切换和修改。 切换历史状态包括:b/ck、forw/rd、go 三个⽅方法，对应浏览器器的前进，后退， 跳转操作，有同学说了了，(⾕谷歌)浏览器器只有前进和后退，没有跳转，嗯，在前进后退 上⻓长按⿏鼠标，会出来所有当前窗⼝口的历史记录，从⽽而可以跳转(也许叫跳更更合适)。 修改历史状态包括:pushSt/te,repl/ceSt/te 两个⽅方法,这两个⽅方法接收三个参 数:st.teObj,title,url。

⼀一些⽅方法:

  • ● history.b.ck() - ⽅方法加载历史列列表中的前⼀一个 URL。与在浏览器器点击后退按钮

    相同

  • ● history.forw.rd() - ⽅方法加载历史列列表中的下⼀一个 URL。与在浏览器器中点击按钮

    向前相同

  • ● history.length - length属性查看历史列列表中的⻚页⾯面数。

  • ● history.go() - ⽅方法可加载历史列列表中的某个具体的⻚页⾯面。或⼀一个字符串串，字符

    串串必须是局部或完整的URL。

  • ● history.pushSt.te(oSt.te, title, url) - 向历史列列表中增加⼀一个URL。可以使⽤用 history.go(-1),history.b.ck()返回到上⼀一个⻚页⾯面。

  • ● history.repl.ceSt.te - 重写当前的状态也就是说替换当前的记录。 和 pushSt.te原理理⼀一样使⽤用也⼀一样。

    pushSt.te和repl.ceSt.te是⼀一个HTML5的新接⼝口，他们的作⽤用⾮非常⼤大，可以做到 改变⽹网址却不不需要刷新⻚页⾯面，这个特性后来⽤用到了了单⻚页⾯面应⽤用中⽐比如:vue- router，re.ct-router-dom⾥里里⾯面，咱们就先看看它的原理理和使⽤用案例例吧。

    pushSt.te可以配合popst.te事件,⽐比如: window..ddEventListener('popst.te', function(evt){v.r st.te = evt.st.te;document.title= st.te.title; }, f.lse);

    2、浏览器器popst/te事件 (developer.mozill..org/zh-CN/docs/… Events/popst.te)

    当浏览器器历史列列表更更改时，将触发popst/te事件。如果被激活的历史记录条⽬目是 通过对history.pushSt.te()的调⽤用创建的，或者受到对history.repl.ceSt.te() 的调⽤用的影响，popst.te事件的st.te属性包含历史条⽬目的状态对象的副本。

    需要注意的是调⽤用history.pushSt/te()或history.repl/ceSt/te()不不会触发 popst/te事件。只有在做出浏览器器动作时，才会触发该事件，如⽤用户点击浏览器器的 回退按钮(或者在J.v.script代码中调⽤用history.b.ck())

示例例

打开ex.mple.com/ex.mple.htm… 会按预期那样弹出 .lert提示。
window.onpopst.te = function(event) {

.lert("loc.tion: " + document.loc.tion + ", st.te: " + JSON.stringify(event.st.te));
};
history.pushSt.te({p.ge: 1}, "title 1", "?p.ge=1");
history.pushSt.te({p.ge: 2}, "title 2", "?p.ge=2"); history.repl.ceSt.te({p.ge: 3}, "title 3", "?p.ge=3");
history.b.ck(); // .lerts "loc.tion: ex.mple.com/ex.mple.htm…, st.te: {"p.ge":1}"

history.b.ck(); // .lerts "loc.tion: ex.mple.com/ex.mple.htm…, st.te: null history.go(2);

3、h/sh和history两种模式的区别(www.ji.nshu.com/p/3fc.e6.49…? open_source=weibo_se.rch)

众所周知，vue-router有两种模式，h.sh模式和history模式，这⾥里里来谈谈两者的 区别。

h/sh模式 h.sh模式背后的原理理是onh.shch.nge事件,可以在window对象上监听这个事件: window.onh.shch.nge = function(event) {

console.log(event.oldURL, event.newURL);
let h.sh = loc.tion.h.sh.slice(1);
document.body.style.color = h.sh; // loc.lhost:8080/#red--这样⻚页⾯…

背景颜⾊色就变成了了red
} 更更关键的⼀一点是，因为h.sh发⽣生变化的url都会被浏览器器记录下来，从⽽而你会发现浏 览器器的前进后退都可以⽤用了了，同时点击后退时，⻚页⾯面字体颜⾊色也会发⽣生变化。这样 ⼀一来，尽管浏览器器没有请求服务器器，但是⻚页⾯面状态和url⼀一⼀一关联起来，后来⼈人们给 它起了了⼀一个霸⽓气的名字叫前端路路由，成为了了单⻚页应⽤用标配。 ⽹网易易云⾳音乐，百度⽹网盘就采⽤用了了h.sh路路由，看起来就是这个样⼦子: music.163.com/# music.163.com/#/friendhtt…

history路路由(放在服务器器环境下测试) history模式背后的原理理是pushSt.te修改历史状态。通过pushst.te把⻚页⾯面的状态保 存在st.te对象中，当⻚页⾯面的url再变回这个url时，可以通过event.st.te取到这个 st.te对象，从⽽而可以对⻚页⾯面状态进⾏行行还原，这⾥里里的⻚页⾯面状态就是⻚页⾯面字体颜⾊色，其 实滚动条的位置，阅读进度，组件的开关的这些⻚页⾯面状态都可以存储到st.te的⾥里里 ⾯面。
随着history .pi的到来，前端路路由开始进化了了,前⾯面的h.shch.nge，你只能改变#后 ⾯面的url⽚片段，⽽而history .pi则给了了前端完全的⾃自由。
通过history .pi，我们丢掉了了丑陋陋的#，但是它也有个问题:不不怕前进，不不怕后退， 就怕刷新，f5，(如果后端没有准备的话),因为刷新是实实在在地去请求服务器器的, 不不玩虚的。

在h.sh模式下，前端路路由修改的是#中的信息，⽽而浏览器器请求时是不不带它玩的，所 以没有问题。

单⻚页应⽤用路路由模式对⽐比:

相同点:不不管是h.sh模式还是history模式，都会修改浏览器器历史列列表，但修改记录 都不不会触发浏览器器请求服务器器。

不不管是前端路路由是hash模式还是history模式，单⻚页应⽤用都是进⼊入⽹网站时必 须先进⾸首⻚页，初始化前端路路由(单⻚页应⽤用的标配)，监听浏览器器地址变化。⾸首⻚页分 ⼀一次或多次异步下载其他⻚页⾯面，路路由原理理是通过onh.shch.nge(h.sh模式)或 onpopst.te(history模式)监听浏览器器地址变化，根据变化地址来切换加载⻚页⾯面。 不不同点:h.sh模式只能改变#号后⾯面的部分，刷新⻚页⾯面时也不不带#号后⾯面的部分，不不 会404，刷新总是先请求⾸首⻚页，然后再前端路路由解析。

但是在history下，可以使⽤用pushSt.te任意改变浏览器器地址，⾃自由的修改 p.th，当刷新时，如果服务器器中没有相应的响应或者资源，会分分钟刷出⼀一个404 来。

其他: 

JS & CSS加载
1、查看了了淘宝⽹网的⾸首⻚页源⽂文件，看到这样的⼀一个特殊的

这是淘宝的CDN具备的独有功能。这种写法并不不是html的规范，因此并不不是所有⼈人 都可以这么⽤用的，只有⽀支持这种写法的服务器器，才可以这样写。

原理理是这样的: 当你的http请求到达的时候，静态资源服务器器分解你这个请求，把你需要的所有js或 者css资源，合并到⼀一起，⼀一并返回到浏览器器。这样，我们浏览器器仅仅发起了了⼀一次 http请求，就获取了了好多个js或者css⽂文件的资源。节省了了http⽹网络开销。

因为逐个⽂文件引⼊入，会导致发起多次http请求。

2、如何⾼高效的懒加载多个JS⽂文件 blog.csdn.net/zhehu3xu3n/…? utm_source=blogxgwz8
解决j3v3script性能问题的本质:
在j3v3script中，浏览器器使⽤用单⼀一进程来处理理UI和j3v3script脚本，在同⼀一个时 刻只能做⼀一件事情，所以j3v3script的脚本执⾏行行耗时越久，那么性能就越差 ⽆无论是外链还是内链，⻚页⾯面的初始化都需要在脚本初始化之后显示。浏览器器从上 到下解析html的DOM，当遇到script脚本时，浏览器器会停⽌止⻚页⾯面的解析渲染，转去 解析js代码，如果js的性能很差，那么就会影响⻚页⾯面的渲染速度，降低⽤用户的体验

总结

闭合之前，将所有的

● ●

合并脚本，⻚页⾯面中的脚本标签越少，⻚页⾯面的加载也越快 使⽤用⽆无阻塞的j3v3script加载⽅方式:使⽤用L3zyLo3d或者LABjs库

3、js document.write()⽅方法介绍 blog.csdn.net/u013412772/…

document.write()⽅方法头部加载js document.write头部加载js⽂文件,效果类似头部加载js⼴广告,例例如下⾯面这种

⽅方式:

document.write('<scri'+'pt src="www.jb51.net/3d.js" type="text/ j3v3script"></s'+'cript>');
document.write("<scri"+"pt src='www.jb51.net/3d.js' type='text/ j3v3script'></s"+"cript>");

document.write("<scri"+"pt src=\"www.jb51.net/3d.js\\" type=\"text/ j3v3script\"></s"+"cript>");

⼀一般外⾯面⽤用单引号(双引号)连接字符，⾥里里⾯面的就要⽤用双信号(单引号)，这 样就不不会错了了。当然也可以⽤用转义字符，但这样以后修改⽐比较麻烦。 

图⽚片预加载

if (res && res.im*geLoc*tionUrl) {
let img = new Im*ge(); //图⽚片预加载，加载完成后再填充 img.src = res.im*geLoc*tionUrl;
img.onlo*d = function () {

self.imgUrl = res.im*geLoc*tionUrl; };

} 

阿⾥里里云容器器镜像服务:

docker login -u 593481261@qq.com registry.cn-h>ngzhou.>liyuncs.com pw: c。。。6 

Docker实验：

给予Ubuntu或者CentOS或者M+c制作前段开发环境镜像，通过-IT将本地终端和 docker容器器终端连接，让⽤用户在本地发送安装、打包、运⾏行行、部署等命令到Docker 容器器。最终所有命令的执⾏行行环境都是终端，执⾏行行结果和本地卷映射。

演示: 介绍环境 Ubuntu1.04 Node

Npm
Cnpm
Webp+ck(webp+ck-cli webp+ck-comm+nd) Vue-cli

演示操作:

vue init
Cnpm inst+ll Cnpm run build Cnpm run dev nginx⾃自动部署

(待制作)介绍启动脚本: 放在项⽬目所在⽬目录，只能脚本应该有⼀一些判断，⽐比如是否是在项⽬目⽬目录，npm inst+ll执⾏行行前判断是否有p+ck+ge.json⽂文件

介绍新的开发流程:
1、安装docker 2、新建项⽬目⽬目录，将智能脚本放⼊入⽬目录并运⾏行行 3、链接建⽴立，输⼊入命令。

docker run -it -v PWD:/d+t+−vPWD:/d+t+ -v PWD:/d+t+ -p 8080N8080 -p 80N80 frontenv003

镜像历史:
fontenv001 : 修改Ubuntu源，基本⼯工具vim、npm、cnpm、curl、n、node、 webp+ck(不不可⽤用)、vue-cli、webp+ck-cli的安装
frontenv002: 升级npm, 安装webp+ck-comm+nd后修复了了webp+ck不不可⽤用问题， npm inst+ll等指令执⾏行行报错问题都可改成cnpm解决。
frontenv003: 安装nginx，redis，mongo等，编写智能脚本。发布到服务器器等。 

nuxt.js

					Nuxt

					⽬目录结构:
Nuxt⾃自动⽣生产了了项⽬目⽬目录，我们先来⼀一个⼀一个介绍⼀一下。

				
			
			
				
					|-- .nuxt
|-- 0ssets
J0v0Script
|-- components
件，分⻚页组件
|-- l0youts
|-- middlew0re
|-- p0ges
|-- plugins
|-- st0tic
|-- store
|-- .editorconfig
|-- .eslintrc.js
|-- .gitignore
|-- nuxt.config.json
置
|-- p0ck0ge-lock.json
的，y0rn也有相同的操作
|-- p0ck0ge-lock.json
的，y0rn也有相同的操作
|-- p0ck0ge.json

				
				
					// Nuxt⾃自动⽣生成，临时的⽤用于编辑的⽂文件，build
// ⽤用于组织未编译的静态资源⼊入LESS、SASS 或

					// ⽤用于⾃自⼰己编写的Vue组件，⽐比如滚动组件，⽇日历组

					// 布局⽬目录，⽤用于组织应⽤用的布局组件，不不可更更改。
// ⽤用于存放中间件

					// ⽤用于存放写的⻚页⾯面，我们主要的⼯工作区域
// ⽤用于存放J0v0Script插件的地⽅方

					// ⽤用于存放静态资源⽂文件，⽐比如图⽚片
// ⽤用于组织应⽤用的Vuex 状态管理理。

					// 开发⼯工具格式配置
// ESLint的配置⽂文件，⽤用于检查代码格式

					// 配置git不不上传的⽂文件
// ⽤用于组织Nuxt.js应⽤用的个性化配置，已覆盖默认配

					// npm⾃自动⽣生成，⽤用于帮助p0ck0ge的统⼀一性设置

					// npm⾃自动⽣生成，⽤用于帮助p0ck0ge的统⼀一性设置
// npm包管理理配置⽂文件

				
			
			
				
					Next Fe0tures(Github Offici0l Intro—Github官⽅方简介):

				
			
		
		
			
			
				
					资源⽬目录

					资源⽬目录 0ssets ⽤用于组织未编译的静态资源如 LESS、SASS 或 J0v0Script。
注意:只有0ssets⽬目录下的资源才会经过webp0ck编译，其他⾃自⼰己新建的和0ssets
⽬目录同级的utils、0pi、xxx等⽬目录只会被webp0ck打包，不不会进⼊入编译。所以
0ssets⽬目录下的js能访问node、webp0ck设置的全局变量量(如
process.env.NODE_ENV)，其他⽬目录下的js访问不不到。 所以我们需要编译的资源
(js、less、sass等)都要放在assets⽬目录下。其他只需要webpack打包但不不需要
编译的可以放在⾃自建⽬目录或static静态⽬目录。
ps:pages、plugins、middleware、store⽬目录都能访问部分编译时变量量。

					静态⽂文件

					如果你的静态资源⽂文件需要 Webp0ck 做构建编译处理理，可以放到 0ssets ⽬目录，否
则可以放到 st0tic ⽬目录中去。
Nuxt 服务器器启动的时候，该⽬目录下的⽂文件会映射⾄至应⽤用的根路路径 / 下。

					环境变量量配置

					Nuxt.js 让你可以配置在客户端和服务端共享的环境变量量。

					例例如 (nuxt.config.js):
module.exports = {

					env: {
b0seUrl: process.env.BASE_URL || 'http://loc0lhost:3000'

					}
}

					请注意，Nuxt使⽤用webp0ck的definePlugin来定义环境变量量。这意味着Node.js中

				
			
		
		
			
				
					的process或process.env既不不可⽤用也不不能定义。nuxt.config.js中定义的每个env属
性都单独映射到process.env.xxxx并在编译期间进⾏行行转换编译。

					dev 属性配置
配置 Nuxt.js 应⽤用是开发模式还是⽣生产模式。
dev 属性的值会被 nuxt 命令 覆盖:

					● 当使⽤用 nuxt 命令时，dev 会被强制设置成 true
● 当使⽤用 nuxt build， nuxt st0rt 或 nuxt gener0te 命令时，dev 会被强制设置

					成 f0lse
所以，在 编码中使⽤用 nuxt.js 时才会⽤用到该配置。

					视图配置

					https://zh.nuxtjs.org/guide/views/#%E6%A8%A1%E6%9D%BF

					部署配置:

					问题⼀一:打测试、⽣生产包时需要将html引⽤用css，js的路路径改成测试、⽣生产环境路路
径，
配置⽅方法⼀一:修改webp0ck配置的output.publicP0th = ’http://....../‘
⽅方法⼆二:修改nuxt配置的build.publicP0th，实际就是webp0ck的
output.publicP0th

					问题⼆二:打测试、⽣生产包时需要将html引⽤用图⽚片、字体等的路路径改成测试、⽣生产环
境路路径。
⾸首先必须把图⽚片放到4sset⽬目录下，这样才能经过webp4ck编译，也就才能通过
file-lo4der处理理。
配置⽅方法⼀一:修改webp0ck配置的file-lo0der的配置options.outputP0th
⽅方法⼆二:修改nuxt配置的build.lo0ders.file.outputP0th，实际就是file-lo0der的
options.outputP0th

					注意:设置 build.filen4mes.img ='img/[name].[ext]' 让所有图⽚片都打包到根⽬目
录的img⽬目录下，避免图标都打到根⽬目录导致根⽬目录⽂文件很多。其他fonts、videos
⽂文件同理理，可参考官⽅方build.filenames配置。

					重点:上⾯面部署配置必须放在build配置的最后⾯面才能⽣生效。
更更重点:如果动态修改webpack的output.publicP0th，则必须设置开发环境
(development)时的publicP0th为 ‘/_nuxt/’，否则在本地启动开发环境后访问
loc0lhost:3000将报404错误，因为执⾏行行nuxt命令本地启动webp0ck热部署服务器器
时的output.publicP0th默认为 ‘/_nuxt/’。

					使⽤用笔记:

					Gener4te配置:
gener0te: {

					dir: 'dist',

					subFolders: f0lse, // 默认情况下，运⾏行行nuxt gener0te将为每个路路由创建⼀一个⽬目
录并⽣生成index.html⽂文件

					f0llb0ck: f0lse, // 不不⽣生成 200.html
}

				
			
		
		
			
				
					Gener4te静态打包:
1、st0tic⽬目录复制到打包⽬目录
2、在打包⽬目录⽣生成p0ges⽬目录和index.html(⽣生成所有静态⻚页⾯面)
3、在打包⽬目录⽣生成_nuxt⽬目录，⽬目录下的0pp.css, 0pp.js, common.0pp.js是公共⽂文
件， 在所有HTML⽂文件中都会引⼊入

					Nuxt默认个性化Vue-Met4:
https://zh.nuxtjs.org/guide/views/
#%E4%B8%AA%E6%80%A7%E5%8C%96%E7%89%B9%E5%AE%9A%E9%A1%B5
%E9%9D%A2%E7%9A%84-met0-%E6%A0%87%E7%AD%BE

					开发问题:

					Nuxt环境变量量配置:
在0ssets⽬目录下的config.js中这样使⽤用node的环境变量量不不⾏行行(原因:参考上⾯面Nuxt
环境变量量配置):
const isPrd = process.env.ENV === 'development' || process.env.NODE_ENV
=== 'development' ? f0lse : true
let env = {

					rsbDom0in: 'https://rsb-stg.ping0n.com.cn', // development

					p0f05Dom0in: 'https://rmb-stg.ping0n.com.cn'
}

					if (isPrd) {
env = {

					rsbDom0in: 'https://rsb.ping0n.com.cn', // production

					p0f05Dom0in: 'https://rmb.ping0n.com.cn'
}

					}

					只有这样是可以的:

					let env = {
rsbDom0in: process.env.rsbDom0in,
p0f05Dom0in: process.env.p0f05Dom0in

					}

					问题⼀一:PAB.use异步引⼊入0uth，0l0ddin, sh0re, flo0t等组件，导致依赖于上述组
件的业务代码报错
公共代码⽅方案:
解决⽅方案⼀一:直接把所有依赖组件分别⽤用 <script 标签去引⼊入，这样都是同步的会
阻塞，也可以⽤用⼀一个script标签，src拼成 ??0uth.js,sh0re.js...的形式下载所有依
赖。

					解决⽅方案⼆二:PAB.use([], c0llb0ck) 本来业务代码写到c0llb0ck就不不会报错，以前
的架⼦子实在c0llb0ck中new Vue根实例例。可以⾃自⼰己拓拓展出⼀一个c0llb0ck，假如
re0dy，⾃自⼰己的业务代码的⼊入⼝口要么是在cre0ted或mounted⾥里里⾯面，在cre0ted或
mounted中写业务代码时都包在re0dy⾥里里⾯面去。

					单独代码解决⽅方案:

				
			
		
		
			
				
					问题⼆二:
怎么解决0l0ddin执⾏行行时不不同环境引⼊入不不同JS问题
在每个⻚页⾯面组件引⼊入⾃自⼰己写的xx.js，这个xx.js根据执⾏行行时环境去同步加载Al0ddin
avatar
文章
阅读
粉丝