前端 vue 项目上线前操作

news2025/4/25 22:34:12

一、打包分析

二、CDN加速

三、项目部署

1. 打包部署

2. nginx 解决 history 刷新 404 问题

3. nginx配置代理解决生产环境跨域问题

一、打包分析

项目编写完成后，就需要部署到服务器上供他人访问。但是在此之前，我们可以先预览项目的体积大小，优化其不必要的内存开销。

进入到该项目中，在命令行窗口输入打包分析代码

npm run preview --report

之后可以进入到预览页面，我们可以把 mock 相关给去除，因为这是在开发阶段模拟数据用的，在真实的环境中，是用不到mock的

去除main.js中对于mock.js的引用

二、CDN加速

CND 本名为分发服务器，意为更近的访问区间更快的访问速度将所需要的文件返回给客户端。在使用 npm 安装第三方库时，这些库会被打包到最终的构建文件中，导致构建文件体积增大。而通过 CDN 引入，这些库不会被打包到构建文件中，从而显著减少了打包后的文件体积。例如，对于一些大型库如 Element-UI，其打包后的体积可能相当可观，通过 CDN 引入可以有效减轻打包负担。把大的文件在打包时排除在外，可以缩小打包的大小，保证 js 的加载速度，排除的包可以采用 CDN 的方式链接引入。

互联网上有很多免费的公共库 CDN，例如 cdnjs、jsdelivr、unpkg，但哪个最稳定，始终没有明确的答案。有些国外的 CDN 虽然有大公司支持，但在国内无法确保网络稳定性；有些国内的 CDN 虽然网络稳定，但无法确保未来是否仍在维护。

https://cdnjs.com/CDNJS提供非常完整的 JavaScript 库(国外): https://cdnjs.com/

http://staticfile.org/7牛云提供的CDN库： http://staticfile.org/

http://www.jsdelivr.com/国内CDN备案给注销了，现在使用的是日本等周边的服务器: http://www.jsdelivr.com/

字节跳动静态资源库： http://cdn.bytedance.com/

如下，这里进入 cdnjs 网站搜索想要引入的包，复制其链接粘贴到项目的 public/index.html 即可

我们需要在vue.config.js 配置文件配置哪些包在打包时排除，然后在public/index.html 引入样式和链接即可。

1. webpack排除打包-代码位置(vue.config.js)

这个 externals 里面配置的信息是键值对(key-value)， key 第三方依赖库的名称，同package.json文件中的 dependencies 对象的key一样。

value 第三方依赖编译打包后生成的js文件，然后js文件执行后赋值给window的全局变量名称。

那如何找这个变量名呢？可以复制你需要引入的 cdn 链接，在浏览器打开。但由于这些 js 是压缩过的，所以需要自己找个在线格式化 js 代码的工具(这里给个链接：https://www.qianbo.com.cn/Tool/Beautify/Js-Formatter.html)，把压缩过的 js 代码拷贝过去，就可以查看代码了。

这里我找了一个 vue 的来测试，其中 t 就是 this, this 就是 window 对象，那么 vue 的全局变量就是 Vue

2. 在 public/index.html 页面引入样式和 js 文件

 <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">

 <!-- // 外部引入的 cdn , 这样就打包就可以把这三个文件排除在外 -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js" ></script>

之后重启项目就好了。

用 externals 提取第三方依赖包后，之前引入的依赖(如入口文件 main.js)是否需要改动呢？

如果引入的链接放在 app 容器的后面，则需要删除。这是因为先引入 app容器，再引入外部链接，就会现在 main.js 中编译 vue、elementUI，此时 vue、elememtUI 是不存在的。总之，只要在 main.js 中引入的依赖，CDN 链接都放在 app.js 之前加载，就不会出现问题。