问题汇总

1、import()

添加异常处理：

import（'...'）.then（mod => {

    someOperate(mod);

}).catch（err => {

    console.log（'失败'）;
});

2、GIT：you need to resolve your current index first 解决办法

• 问题 ：merge时产生冲突，使得分支的状态为merging，其实是指merge失败，还停留在merge状态，也不能执行pull操 作

• 解决：

  1. 解决conflicts后再次执行merge；

  2. 回退到merge前

     git reset --merge

3、NPM：Cannot find module 'webpack-cli/bin/config-yargs'

• 问题：webpack 版本与webpack-dev-server的版本不兼容
• 解决：
  • 修改webpack版本
  • 修改webpack-dev-server版本

4、Do not use built-in or reserved HTML elements as component id

• 问题：不要使用内置或保留的 html元素作为组件 id

5、NODE：全局地址代替

相关文档

• 提前添加/修改 process.VUE_APP_BASE_API
• 再获取该地址，发送请求

6、Maximum call stack size exceededill install loadIdealTree

• 问题：安装依赖时，出现新版本nodejs与npm最新版本出现不兼容

• 解决：给 npm 降级

  npm install -g npm@5.4.0

  或者

  cnpm install npm@5.4.0 -g

7、DOS 删除文件夹以及内部子文件

rmdir /s /q 文件夹名称

• rmdir 删除目录命令
• /s是代表删除所有子目录跟其中的档案。
• /q是表示在删除档案或目录时，不再问提示 Yes or No 的动作。

8、(node:6416) ExperimentalWarning: The fs.promises API is experimental

• 问题：node的版本不是最新的，而在项目引入的模块是最新的。或者是 node 版本与 npm 版本不匹配

• 解决：

  1. 升级node为最新版

  2. 安装 node 版本控制工具 nvmw（win 系统），nvm（mac系统）

     安装：

     npm install nvmw -g

     使用：（原版本 v10.13.0）

     nvmw install v14.16.0

     nvmw use v14.16.0

9、module not found core-js/library/fn/get-iterator

• 问题：core-js模块的版本问题（猜测）

• 解决：

  • 安装不同版本的core-js

  npm install core-js@2

  • 重新安装依赖包

  删除node_modules

  npm i

10、Cannot find module 'webpack-cli/bin/config-yargs'

• 问题：版本不兼容（webpack3.x的版本与webpack-dev-server3.x 的版本不兼容。）
• 解决：
  • 重新安装依赖（建议使用npm）
  • 修改版本

11、This relative module was not found: * ./../../webpack/buildin/global.js in ./node_modules/vuex/dist/vuex.esm.js

• 问题：更改了文件目录或者文件名后，编辑器会把一些认为有关联的路径也一并修改了。
• 解决：重新安装项目所需的依赖

12、访问跨域问题

详情

13、 VUE watch 监听对象、数组

详情

14、you may have an infinite update loop in watcher with expression

• 问题：在带有表达式的观察程序中，可能有无限更新循环
• 解决：在某数据观察（watch）程序中，去除作用域内对该数据的修改

15、安装echarts报："export 'default' (imported as 'echarts') was not found in 'echarts'

• 问题：当前脚手架版本暂时不支持当前版本的echarts（5.0.3）
• 解决：安装其他版本的echarts（4.9.0）

16、浏览器解析Vue

17、V8

详情

18、使用ant-design-vue报：Inline JavaScript is not enabled. Is it set in your options

• 解决：

  css: { 
  	loaderOptions: { // 向 CSS 相关的 loader 传递选项 
  		less: { 
  			javascriptEnabled: true 
  		} 
  	} 
  },
  

19、chrome 浏览器解决跨域问题

1. 右键打开 chrome 图标

2. 选择 属性

3. 点击 快捷方式

4. 设置 目标 ，

   --disable-web-security --user-data-dir=C:\MyChromeDevUserData

   // 目录可自行定义

5. 在 C 盘创建 MyChromeDevUserData 文件夹

6. 重新打开 chrome 浏览器 （成功处理浏览器跨域问题）

   （浏览器提示 不受支持命令行标记：--disable-web-security 表示完成）

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ry3ANzz-1618910296094)(…/printScreen/20190827153409639.png)]

20、chrome 80 Cookie 跨域 SameSite Lax 的错误

• 问题：从Chrome 51开始，浏览器的Cookie新增加了一个SameSite属性，用来防止CSRF攻击和用户追踪。该设置当前默认是关闭的
  在Chrome 80之后，该功能默认已开启。
• 解决：Google浏览器访问 chrome://flags/#same-site-by-default-cookies地址，设置cookie的该选项（SameSite by defaule cookies）为禁用，然后重启浏览器。

21、使用代理解决跨域问题

• 利用 webpack-dev-server的proxy解决跨域传输 cookie的问题

1. 项目根目录创建 vue.config.js

   devServer:{
           host: "localhost", // 本地主机
           port: "8080", // 端口
           open: true, // 自动打开
           proxy: {
               // '/\*/': {
               'login.do': { // 自定义规则，匹配含有 '/admin' 的接口
                   // 是否存在跨域，设置为true，本地会虚拟一个服务器接收你的请求并代替你发送该请求
                   changeOrigin: true,
                   // 将匹配的接口代理到该目标上
                   target: "http://suc.dev.qqbibi.com",
                   // target: "http://192.168.10.223:8080",
                   // 忽略 https 安全提示。默认情况下，不接受运行在HTTPS上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行
                   secure: false,
                   // 忽略 API 前缀
                   pathRewrite: {'^/login.do' : ''},
                   headers: {
                       // 设置固定的 cookie 便于验证身份
                       'Cookie': .....
                   },
                   // 在代理收到请求之后将数据发给浏览器之前做一层拦截
                   onProxyRes: 
   function(proxyRes, req, res) {
       console.log(proxyRes);
       var cookies = proxyRes.headers['set-cookie'];
       // 返回的cookie中提取domain
       var cookieRegex = /Domain=\.?xxx.com/i; 
       //修改cookie Path
       if (cookies) {
           var newCookie = cookies.map(function(cookie) {
               if (cookieRegex.test(cookie)) {
                   // 将domain设置为localhost
                   return cookie.replace(cookieRegex, 'Domain=oss.dev.qqbibi.com');
               }
           return cookie;
           });
           delete proxyRes.headers['set-cookie'];
           proxyRes.headers['set-cookie'] = newCookie;
       }
   }
               },
   
               'list.do': {
                   changeOrigin: true,
                   target: "http://oss.dev.qqbibi.com/",
                   secure: false,
                   headers: {
                       // 设置固定的 cookie 便于验证身份
                       'Cookie': .....
                   },
                   onProxyRes: 
   function(proxyRes, req, res) {
       var cookies = proxyRes.headers['set-cookie'];
       // 返回的cookie中提取domain
       var cookieRegex = /Domain=\.?xxx.com/i; 
       //修改cookie Path
       if (cookies) {
           var newCookie = cookies.map(function(cookie) {
               if (cookieRegex.test(cookie)) {
                   // 将domain设置为localhost
                   return cookie.replace(cookieRegex, 'Domain=oss.dev.qqbibi.com');
               }
           return cookie;
           });
       delete proxyRes.headers['set-cookie'];
       proxyRes.headers['set-cookie'] = newCookie;
       }
   }
               },
           }
       }
   

2. 接口编写

22、Failed at the node-sass@4.14.1 postinstall script

• 解决：

  • 直接在当前目录下进行node-sass 的数据源没置

  npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
  

  ​ 再次执行npm i

  • cnpm install node-sass --save

23、动态路由的实现

• router.addRoutes([...Array])

• 参数说明：必须为数组

  const addRoute = [{
      path: '/aaa',
      component: () => import(''),
      name: 'AddReward',
  	meta: { ... }
  }]
  this.$router.addRoutes(addRoute)
  
  // 路由跳转
  this.$router.push('/aaa')
  

24、axios post请求的传参问题

• 当参数的格式是Request Payload：

  • 引用 qs 来 encode 传入的参数

  const qs = require('qs');
  axios.post('/foo', qs.stringify({ 'bar': 123 }));
  

25、配置axios的拦截器

• 请求拦截

  // 引入 axios 模块
  import axios from 'axios'
  // 创建一个拥有通用配置的 axios 实例对象
  const service = axios.create({
      baseURL: '', // 请求的 基本url(不包括接口)
      timeout: ,   // 超时
      headers: {}  // 请求头
  })
  // 在发送请求时做处理
  axios.interceptors.request.use( 
      config => {
      /**	config 对象：
       * data    post请求的数据内容
       * params  get请求的数据内容
       * headers 请求头
       * method  请求方式
       * timeout 请求超时设置 
       * url     请求的接口
       */
      config.headers['Content-type'] = "application/json"
      return config
  	}, error => {
          Promise.reject(error)
      }
  )
  

• 响应拦截

  axios.interceptors.response.use(
  	response => {
          const res = response.data
          
          return res
      }, error => {
  		console.log(error)
          
          return Promise.reject(error)
      }
  )
  

26、Nginx 启动错误：An attempt was made to access a socket in a way forbidden by its access permissions)

• 问题：端口被占用

• 解决：

  netstat -nao // tasklist

  taskkill PID ...

  （当系统占用 80 端口时）

  管理员进入命令行界面，关闭http服务

  net stop http

27、js 模板引擎

<div id="app"></div>
<script id="one" type="text/html">
    <ul>
        {{ each list as value i }}
        <li>当前的索引为 {{ i+1 }} ， 相应的值为 {{ value }} </li>
        {{ /each }}
    </ul>
    {{ include 'textif'}}
</script>
<script>
    // 用于遍历的数据 list
    const data = {
        title: "测试模板引擎的使用",
        list: ['one' , 'two' , 'three'],
        first: true,
        second: false
    }
    // 通过 template 方法将模板转化为原生 html 代码
    let one = template('one' , data)
    // 将转化的代码添加在相应的盒子中
    let app = document.getElementById("app")
    app.innerHTML = one;
</script>

https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E5%BE%AA%E7%8E%AF

https://blog.csdn.net/weixin_44206189/article/details/91352842

28、git版本回退并提交

1. 方式一：使用 reset

   git reset--hard --HEAD^ // 一个 ^ 代表回退一个

   git push -f // 强制提交至远程仓库

   git push -f -u origin master // 提交至远程分支 master

2. 方式二：使用 revert

29、elementui table禁用复选框某一行

<el-table-column
  type="selection"
  :selectable='checkboxT'
  width="28">
</el-table-column>
// 复选框
checkboxT(row, rowIndex){
  // 禁用第一行
  if(rowIndex==0){
    return false;//禁用
  }else{
    return true;//不禁用
  }

30、git删除分支

• 列出本地分支：git branch

• 删除本地分支：

  git branch -D branchName

  或git branch --delete branchName

• 删除本地的远程分支
  git branch -r -D origin/branchName

• 远程删除git服务器上的分支：
  git push origin -d branchName

  或 git push origin --delete branchName

31、vue项目的eslint报错问题

1. 移除eslint

npm uninstall eslint // 移除eslint

2. 注释.editorconfig的相关格式规范内容
3. 给编辑器（vscode）安装一个eslint插件

32、vue的mixins对象

• mixins就是混入

  一个混入对象可以包含任意组件选项

  同一生命周期，混入对象会比组件先执行

export deault {
	created(){
		this.sayHello()
	},
	methods: {
		sayHello(){ console.log("hello") }
	}
}

<script>
import mixins from 'mixins.js'
export default {
	// 当存在多个时，先调用先执行
	mixins: [mixins],
	created(){ console.log("created") }
}
</script>
/** 打印结果
* hello
* created
*/

33、scss的&：父选择器标识符

// 悬浮修改字体颜色
.text a {
  color: blue;
  &:hover { color: red }
}

上面的代码编译的时候，会将&替换为父选择器a，编译后的css代码如下:

.text a {
  color: blue;
}
.text a:hover {
  color: red;
}

34、HTML引用Github图标

<!-- 使用iframe标签 -->
<iframe 
src="
https://ghbtns.com/github-btn.html?user=private69&repo=buildPageImplement&type=star&count=true&size=large" 
scrolling="0" 
frameborder="0"
></iframe>

• user：对应的github用户名
• repo：项目名称
• type：star/watch
• count：Boolean
• size：尺寸，large

35、express使用post请求

• 由于body-parser插件已被弃用，故不能使用引入该插件的方式

  const express = require('express')
  const app = express()
  const bodyParser = require('body-parser')
  
  app.use(body-parser.json())
  app.use(body-parser.urlencoded({ extended: false }))
  

  body-parser deprecated undefined extended

• express自带引入post

  const express = require('express')
  const app = express()
  
  app.use(express.json())
  app.use(express.urlencoded({ extended: false }))
  

PS. 在浏览器地址栏填写的url皆采用GET的方式，测试POST需要使用Postman

YAPI

36、elementui 添加验证规则

data(){
	// 新建规则
	let validateName = (rule , value , callback) => {
		// value 为相关的值
		if(value){
			return callback(new Error("请输入 ！"))
		}
		callback()
	}
	rule: {
		name: [
			{validator: validateName , trigger: 'blur'}
		]
	}
}

37、Linux查看文件内容

• more 文件名 # 根据窗口大小，一页一页的显示文件内容

  Enter 向下n行，需要定义，默认为1行；

  Ctrl f 向下滚动一屏；

  空格键 向下滚动一屏；

  Ctrl b 返回上一屏；

  = 输出当前行的行号；

  :f 输出文件名和当前行的行号；

  v 调用vi编辑器；

  ! 命令 调用Shell，并执行命令；

  q 退出more

• less 文件名