详解Vue项目的打包方式(生成dist文件)


Posted in Vue.js onJanuary 18, 2022

一、相关配置

情况一(使用的工具是 vue-cil)

        如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件;在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码:

//打包配置文件
module.exports = {
  assetsDir: 'static',
  parallel: false,
  publicPath: './',
};

        结构如下:

详解Vue项目的打包方式(生成dist文件)

情况二(使用的工具是 webpack) 

        如果使用的是 webpack,则直接在 config 中 index.js 文件下修改 webpack 配置:

assetsPublicPath: './'

        结构如下:

详解Vue项目的打包方式(生成dist文件)

二、打包 

        配置完成之后,调起控制台,输入打包命令 npm run build 开始打包;

详解Vue项目的打包方式(生成dist文件)

        成功后会有如下提示;

详解Vue项目的打包方式(生成dist文件)

        且会在项目目录自动生成 dist 文件夹; 

详解Vue项目的打包方式(生成dist文件)

        dist 文件夹就是我们需要的包,随后放至服务器部署上线即可;需要注意打包之后无论在项目中做了何种修改,都需要 npm run build 重新打包。

到此这篇关于详解Vue项目的打包方式(生成dist文件)的文章就介绍到这了,更多相关Vue项目打包 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
详解Vue的列表渲染
Nov 20 #Vue.js
详解Vue slot插槽
Nov 20 #Vue.js
详解Vue router路由
Nov 20 #Vue.js
vue中 this.$set的使用详解
You might like
PHP如何抛出异常处理错误
2011/03/02 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
Python 错误和异常小结
2013/10/09 Python
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
基于python plotly交互式图表大全
2019/12/07 Python
基于Pytorch SSD模型分析
2020/02/18 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
客服服务心得体会
2013/12/30 职场文书
监理资料员岗位职责
2014/01/03 职场文书
个人求职信范文分享
2014/01/06 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
化工厂员工工作总结
2015/10/15 职场文书
《给予树》教学反思
2016/03/03 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL