vue项目打包与配置-学习笔记

柔情只为你懂 2022-08-31 02:30 1057阅读 0赞

### 文章目录 ###

*   *  vue项目打包与配置-学习笔记
     *  前端打包
     *  打包的代码如何运行
     *  打包指定不同的环境变量(开发，测试)
     *  打包手动配置文件
     *  打包压缩，大文件处理
     *  gzip进一步压缩
     *  打包app
     *  打包部署模式

## vue项目打包与配置-学习笔记 ##

## 前端打包 ##

*  npm run build  
    – package.json `-- vue-cli-service build`  
    – 发布到线上的代码，不便于调试
 *  打包发布到测试环境  
    –增加打包命令 开发(后端地址) 测试(后端地址) 线上(后端地址)  
    –npm run build:dev --开发调试环境  
    –npm run build:prod --线上  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

## 打包的代码如何运行 ##

*  不能双击dist/index.html
 *  放到http容器运行 serve tomcat nginx iis
 *  `npm i -g serve`
 *  启动打包后的目录 `serve dist` 访问：http://localhost:5000

## 打包指定不同的环境变量(开发，测试) ##

–npm run build:prod跟npm run build的区别是不是有没有压缩的区别？

*  添加环境变量  
    开发 在根目录添加`.env.dev` dev名称`与package.json中的mode对应`

## 开发环境 键值对
    NODE_ENV=development
    ## 变量以VUE_APP_开头
    VUE_APP_URL=http://139.196.42.209:5004/api/

线上 在根目录添加`.env.prod`

## 线上环境
    NODE_ENV=production
    VUE_APP_URL=http://www.production.com

使用环境变量(`process.env.NODE_ENV`）

## 打包手动配置文件 ##

*  vuecli4.x脚手架基于webpack
 *  vuecli零配置， 不需要零配置可以指定`vue.config.js`（项目根目录）
 *  指定子域配置 publicPath  
    如需要在http://www.baidu.com下加一个子域http://www.baidu.com/map  
    则需要配置publicPath:’/map/’  
    注意：打包后需要在dist中加一层目录map，把所有文件移入map目录 启动serve dist

## 打包压缩，大文件处理 ##

*  开发`npm run build:dev` 7.11mb
 *  线上`npm run build:prod` 1.8mb
 *  少了哪些文件？ 注释， 空行， 压缩， 混淆
 *  大文件 900k
 *  代码细分：三方vue,axios,elementui; 开发代码
 *  把三方的代码移除去, 使用三方提供的cdn资源(免费 收费)
 *  找三方包cdn资源， 添加到public/index.html, 把代码中的from vue, vue.use()  
    // import Vue from ‘vue’  
    // Vue.use(ElementUI)  
    在vue.config.js配置排除三方包
 *  通过减少三方包vue 打包后的js 1.74mb

## gzip进一步压缩 ##

*  `compression-webpack-plugin`
 *  配置vue.config.js
 *  打包会生成以gz结尾的文件
 *  如何看浏览是使用gzip  
    浏览器控制台 点开相关js文件  
    请求头 Accept-Encoding: gzip, deflate, br  
    响应头 Content-Encoding: gzip  
    性能最大化

## 打包app ##

*  android ios
 *  h5运行环境(五大浏览器， 浏览器内核(android ios), 小程序)
 *  打包工具hbuildx  
    创建一个app项目, 把dist目录文件复制到app目录下  
    打开manifest.json, 获取唯一的id  
    发行—原生app-云打包–选择android–使用Dcloud老版本证书–打包  
    初次打包需要DCloud账号密码
 *  打包成功后可以下载
 *  mumu模拟器运行apk文件  
    模拟器右下角—添加apk
 *  打包后的dist可以发布到服务器上 也可以打包成app

## 打包部署模式 ##

*  `hash` 打包后dist直接使用http容器运行 本地级线上相同  
    路由中有\#  
    可以刷新页面
 *  `history` 打包后通过http容器运行刷新会有404  
    路由中没\#  
    不可以刷新页面  
    解决：需要将前端与后端一起部署，由后端负责跳转前端(在讲nodejs说明)  
    可脚手架里可以刷新页面  
    ![在这里插入图片描述][b23fec442925591f0b1fd721319f1b48.png]  
    **vue.config.js文件：**

let CompressionWebpackPlugin = require("compression-webpack-plugin")
    
    module.exports = { 
        // 打包文件访问的相对目录 独立项目 通过项目根目录访问
        // publicPath: './', // http://localhost:5000
        // 打包到子域下面 http://www.baidu.com/map
        publicPath: '/map/', 
        //需要在dist中加一层目录map，把所有文件移入map目录 启动serve dist
        //开发需要map 线上不需要 map--提供代码映射 方便于在浏览器控制台调试
        productionSourceMap: process.env.NODE_ENV==='production' ? false : true,
        //配置webpack
        configureWebpack: config=>{ 
            let plugins = [
                new CompressionWebpackPlugin({ 
                    algorithm: 'gzip', //压缩方式
                    test: /\.js$|\.css$/, //匹配压缩文件
                    threshold: 10240  //对大于10k压缩
                })
            ]
            if (process.env.NODE_ENV === 'production') { 
                config.mode = "production"
                // config.plugins --vuecli默认提供很多插件
                config.plugins = [...config.plugins, ...plugins]
            }else{ 
                config.mode = "development"
            }
            //config----vuecli默认配置
            Object.assign(config, {  //object.assign 把右边的复制到左边对象中
                externals: {  //打包排除的依赖包
                    vue: 'Vue',  //去除vue依赖包
                    // axios: 'axios',
                    // element: 'element-ui'
                }
            })
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20220829/08acd0bdf56848ccab52bea7992e1582.png
[b23fec442925591f0b1fd721319f1b48.png]: /images/20220829/bd3098c0758f4ebfaababd46aa97b4d0.png