详解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 19 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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编程效率的53个要点(经验小结)
2010/09/04 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python实现批量检测HTTP服务的状态
2016/10/27 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python list运算操作代码实例解析
2020/01/20 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
销售员态度差检讨书
2014/10/26 职场文书
水电工岗位职责
2015/02/14 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技