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

最新推荐文章于 2024-10-10 08:00:00 发布

monkeyhlj

最新推荐文章于 2024-10-10 08:00:00 发布

阅读量6.5k

点赞数 3

分类专栏：前端学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/119004525

版权

前端学习专栏收录该内容

53 篇文章 2 订阅

订阅专栏

文章目录

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

前端打包

npm run build
– package.json -- vue-cli-service build
– 发布到线上的代码，不便于调试
打包发布到测试环境
–增加打包命令开发(后端地址) 测试(后端地址) 线上(后端地址)
–npm run build:dev --开发调试环境
–npm run build:prod --线上

打包的代码如何运行

不能双击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说明)
可脚手架里可以刷新页面

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'
            }
        })
    }
}