详解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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
Vue Element plus使用方法梳理
Dec 24 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
1.PHP简介
2006/10/09 PHP
PHP添加MySQL数据记录代码
2008/06/07 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP实现搜索相似图片
2015/09/22 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
python快速排序代码实例
2013/11/21 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
光盘行动倡议书
2014/02/02 职场文书
暑假学习心得体会
2014/09/02 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
海弦WR-800F
2022/04/05 无线电