vue打包步骤,vue前端项目打包部署

　　本文主要介绍Vue前端封装的详细流程。下面文章重点介绍Vue前端封装的详细信息。有需要的朋友可以参考一下，希望能帮到你。

1、添加打包命令

　　不方便调试添加package.json中的代码来配置npm run build并在线发布。

　　命令：

　　npm运行构建：dev开发模式环境

　　npm运行构建：生产在线调试环境

　　build:dev : vue-CLI-服务构建模式dev ，

　　build:prod : vue-CLI-服务构建模式prod

2、运行打包代码

　　不能直接双击dist/index.html。你需要在一个http容器中运行它：serve tomcat nginx iis。这次用发球。

　　下载服务：npm i -g服务

　　报错：

　　错误：EPERM:不允许操作，mkdir C:\ Program Files \ nodejs \ node global \ node _ modules . staging

　　解决：用户-个人用户-删除。npmrc文件

　　启动打包后的目录:服务区

3、打包指定不同的环境变量

　　添加环境变量：

　　开发：创建一个。根目录下的env.dev文件(对应于package.json中的模式)

　　线上：创建。根目录下的env.prod文件(对应于package.json中的模式)

　　使用process.env.NODE_ENV等。需要动态指定变量的地方。

　　//.env.dev

　　# #开发环境

　　节点环境=开发

　　# #变量以VUE应用程序开始

　　VUE_APP_URL=http://www.dev.com

　　//.env.prod

　　# #生产环境

　　节点环境=生产

　　VUE_APP_URL=http://www.prod.com

4、打包自定义文件

　　vuecli基于webpack。

　　Vuecli零配置

　　可以指定vue.config.js，无需零配置。

　　Nrun build: PROD缺少注释、空行、压缩等。

4.1 移除三方包

　　代码细分：

　　三方包：vue elementui axios等。

　　开发代码：自己写的。

　　移出三方包： 由三方提供的cdn(免费，收费)

　　找到三方包cdn资源，添加到public/index.html

　　删除之前导入的导入。

　　在vue.config.js中配置排除包

　　模块.导出={

　　//打开文件访问的相对路径。独立项目通过项目根目录访问。

　　公共路径：“”。/,

　　//开发时需要在线无图——提供代码映射调试代码。

　　production source map:process . ENV . node _ ENV== development ？真：假，

　　//配置webpack

　　configureWebpack: config={

　　///config - vuecli默认配置

　　Object.assign(配置，{

　　//排除依赖包

　　外部：{

　　Vue:“Vue”

　　}

　　})

　　}

4.2 gzip压缩

　　下载NPM一维压缩-网络包-插件

5、打包发生错误：

　　错误类型错误：无法读取未定义的属性“tapPromise”

　　TypeError:无法读取未定义的属性“tapPromise”

　　步骤：脚手架配置gzip打包不支持此版本。错误原因： 使用NPM安装压缩-web pack-plugin @ 6.1.1-save-dev。

　　在vue.config.js中配置

　　解决：

　　let compression webpackplugin=require( compression-web pack-plugin )

　　configureWebpack: config={

　　let插件=[

　　新的CompressionWebpackPlugin({

　　//压缩模式

　　算法： gzip ，

　　//匹配压缩文件

　　测试：/\。js$\。css$/，

　　//对于大于10k的压缩

　　阈值：10240

　　})

　　]

　　if(process . ENV . node _ ENV== production ){

　　config.mode=生产

　　config.plugins=[.插件，插件]

　　}否则{

　　config.mode=开发

　　}

　　打包会生成gz结尾的文件：

　　标头：接受-编码：gzip，deflate，br

　　响应头：内容编码：gzip

　　浏览器查看：

　　Hash:打包后，dist直接在http容器中运行在线一致性。

　　打包部署模式：打包后脚手架不刷新。404在线会议将在404history：举行。前端代码会和后端一起部署，后端负责跳转到前端。

　　关于Vue前端封装的详细流程这篇文章就到这里了。更多关于Vue前端打包的详细流程，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录