1. 修改title和图标

资源可以放在static下面，给一个小的：

直接再index里面改：

不生效，需要在 vue.config.js 中增加：

module.exports = {pwa: {iconPaths: {favicon32: 'logo.png',favicon16: 'logo.png',appleTouchIcon: 'logo.png',maskIcon: 'logo.png',msTileImage: 'logo.png',},},
}

重启项目就可以了。

2. 二维码展示

首先，安装二维码控件：

npm i qrcodejs2

script:

    creatQrCode(qrCodeUrl) {let qrcodeEL = document.getElementById("qrcode");document.getElementById("qrcode").innerHTML = "";let qrcode = new QRCode(qrcodeEL, {text: qrCodeUrl, // 需要转换为二维码的内容width: 100,height: 100,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H});}

html:

这里有个问题：运行后每次调用，都会生成一个新的二维码。而我们希望只生成一个，只是变内容。

解决方案是需要在调用前，先清空数据。就是上面的：

document.getElementById('qrcode').innerHTML = '';

参考：Vue使用qrcodejs2实现二维码生成_会说法语的猪的博客-CSDN博客_qrcodejs2

vue中使用qrcode动态生成二维码，并解决点击按钮多次生成二维码的问题_星星上的程序媛的博客-CSDN博客

3. 提交后台表单的时候，获取 input 的值

构建表格form，直接提交 this.form。

4. 获取div，并显示后台返回信息

document.getElementById('result').innerHTML = response.message;

5. vue后台交互，拦截器

import axios from "axios";//原生的axios
//用来拦截用的
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
//创建一个单例
const http = axios.create({baseURL: 'http://localhost:8080/',timeout: 5000,//响应时间// headers:{"Content-Type":"application/json;charset=utf-8"},
})//拦截器  -请求拦截
http.interceptors.request.use(config => {//部分接口需要tokenlet token = localStorage.getItem('token');if (token) {config.headers.token = token;// config.headers = {//   'token': token// }}return config;
}, err => {return Promise.reject(err)
})//拦截器  -响应拦截
http.interceptors.response.use(res => {// if (res.data.code === 0) {return Promise.resolve(res.data)//这里可以根据服务器返回的数据去自行修改// } else {//   return Promise.reject(res.data)// }
}, err => {return Promise.reject(err)
});//整体导出
export default http;

如果报 Uncaught (in promise)  错误，是返回了 Promise.reject(res.data) 。这里改一下。

参考：https://www.jb51.net/article/263063.htm

6. 打包

参考：vue项目npm run build报错npm ERR! missing script: build（已解决）_不忘初心Eternity的博客-CSDN博客