2024年前端最新vueCli3，一个APP从启动到主页面显示经历了哪些过程

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

后端服务器（nginx服务器为准）：

Nginx还是比较容易实现的，只需增加以下配置：

location = /index.html {
 add_header Cache-Control "no-cache, no-store";
}

前端处理方法：

一、index.html中加入了这几行代码：（虽然能解决问题，比较暴力，但是不推荐使用）

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

不推荐使用的原因是：升级时缓存问题倒解决了，但直接导致了用户每次访问你的程序时都要重新请求服务器，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。

二、在打包文件的后缀名上 添加版本号和时间戳

在vue.config.js 里面添加这个 output

configureWebpack: { // webpack 配置
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    }

如果大家的configureWebpack: config 里面还有其他的配置项，建议这样写。

            
const version = new Date().getTime();
process.env.VUE_APP_VERSION = require('./public/json/version.json').versionDate; // 获取版本号

// output 输出打包文件加版本号
            config.output.filename = `assets/js/[name].${process.env.VUE_APP_Version}.${version}.js`
            config.output.chunkFilename = `assets/js/[name].${process.env.VUE_APP_Version}.${version}.js`
            config.output.path = path.resolve(__dirname, 'dist')

关于项目有用到版本号的，一本都是放在本地的json文件里面，通过axios.get() 获取到。

Vue中请求本地JSON文件并返回数据  
  首先在根目录pulic下面建个json文件
  检查一下自己是否安装过json-server(没安装的话安装一下)
  npm install json-server
  安装完成以后我们就可以运行自己的json文件了
  axios.get(`/json/projectinformation.json`).then((res)=>{})


### 常用的JavaScript设计模式

* 单体模式

* 工厂模式

* 例模式

  ![](https://i-blog.csdnimg.cn/blog_migrate/7bd73268f5102e5a19709e8cd6262b86.png)

  

### 函数

* 函数的定义

* 局部变量和全局变量

* 返回值

* 匿名函数

* 自运行函数

* 闭包

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

  ![](https://i-blog.csdnimg.cn/blog_migrate/6f9e7642751cc0745f50337f448b2017.png)