详解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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue 实现上传组件
May 31 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
详解node中创建服务进程
2017/05/09 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python列表对象实现原理详解
2019/07/01 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Django工程的分层结构详解
2019/07/18 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python @property使用方法解析
2019/09/17 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
计生工作先进事迹
2014/08/15 职场文书
西安大雁塔导游词
2015/02/10 职场文书
学校团代会开幕词
2016/03/04 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
Golang 切片(Slice)实现增删改查
2022/04/22 Golang