vue项目打包(vue项目打包部署到服务器)
命令: npm run build
作用： 用vue-cli内部集成的webpack，把.vue,.less.js 等打包成浏览器可直接执行的代码。
结果： 会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。
app-hash值.js ：主入口
chunk-hash.js.map ：它会记录当前的.js文件中包含了哪个模块，对应代码位置,有利于代码出错快速找到源代码的位置。
chunk:块
vendors：代理商，也就是第三方包
chunk-vendors：第三方包的代码统一放在这里（dayjs,vue,vuex,vue-router,vant）-只要被webpack构建依赖关系发现的包
chunk-hash值.js 某个模块对应的js ,某个.vue文件编译之后的.js。
在配置路由时，如果采用路由懒加载的方式去配置：
component: () => import('../views/search/index.vue')，在打包时，就会生成对应的chunk.
打包结果分析
vuecli中提供一个打包分析的工具：
vue-cli-service build --report
操作：在package.json 中的build项中，添加 --report
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report",
"lint": "vue-cli-service lint"
},复制代码运行：
npm run build复制代码
它会在dist目录下产生一个report.html文件，其中就有对打包结果的分析说明。
访问路径：本地服务器/dist/report.html
效果
可以分析出项目里哪些东西很大, 可以自己针对优化(比如插件只需要某一个功能 , 可以自己用一个方法替换掉整个库)
打包静态资源路径问题
现象：
把dist - 单独放到一个服务器环境(可以是express搭建的, 也可以用vscode+liveserver内置的)
此时我们采用的是vscode+liveserver
当我们打包后会发现项目在运行时会渲染报错404，而页面一般一片空白
这个时候我们可以检查资源加载的路径，如果发现资源加载的路径是用vscode根目录开始的 也就是我们发现的 端口号后面 直接是/css 说明这个这个是直接在根目录下直接找的css这个文件夹，而我们在本地使用live-server搭建的本地服务器运行项目的时候的路径是 端口号后面加的是dist/ ，也就是说明此时的路径是不对的，要想在cscode的根目录下去访问js和css资源，那么肯定会找不到
解决办法：
vue.config.js
module.exports = {
publicPath: './', // webpack打包时, 所有的js和css插入到index.html的时候, 使用相对路径，也就是以此时的html所在的目录为根目录(dist下)去找js和css文件
}复制代码Gzip压缩技术(后端技术)
HTTP协议上的GZIP编码是一种用来改进web应用程序性能的技术。它在服务器端器安装并使用，对纯文本文件的压缩可达原大小的40%。网站加载的速度很大程度取决于网站资源的大小，减少要传输的文件大小可以让加载更快，所以网站上一般都会开启GZIP编码。
如何开启？
不同的服务器软件配置不一样，大多数服务器都是默认开启的。
Nginx
Tomcat
Apache
IIS
....
如何判断项目是否开启了Gzip? -响应头是否有这个选项
Content-Encoding: gzip复制代码
根据环境切换配置项
去掉生产环境的console.log打印
main.js文件中进行函数覆盖console.log
//把系统内置的log方法覆盖，让说有打印失效
console.log = function () {}
console.error = function () {}复制代码虽然上面的可以实现我们所想要的注释console.log的打印的需求，但是我们有不同的环境，在环境切换的时候我们需要手动的去注释上面和放开的代码， 为了能达到自动切换，我们可以进行下面的自动化配置，用环境变量进行判断
process.env 是node环境内置的，启动webpack+node打包/开发服务器时，会把.env.production/.env.development文件里变量赋予到process.env身上
先在项目 根目录下配置文件(文件中的注释用#写)
.env.development .env.test .env.production复制代码
此时的环境分为dev、pro
有的时候还会有 test环境
node环境有个变量叫process - 可以获取到环境变量上的值
所以在上一步的2个文件里分别定义环境变量, 和环境的名字
.env.development
NODE_ENV=development复制代码
另外文件里
.env.production
NODE_ENV=production复制代码
在main.js里加入如下配置
//开发环境下打印，而生产环境下不打印
if (process.env.NODE_ENV !== 'development') {
console.log = function () {}
}复制代码环境变化时接口基地址变化
实现思路和上面 去掉生产环境的console.log打印 是类似的
根据环境变量来切换基地址
作者：任平生_掘金
链接：https://juejin.cn/post/7034821170939559949