vue cli 3.0通用打包配置代码,不分一二级目录


Posted in Javascript onSeptember 02, 2020

1.项目根目录下新建vue.config.js,进行如下配置即可

module.exports={
 publicPath:'',
};

补充知识:Vue-CLI3.0更改打包配置

在实际项目开发中,我们一般会直接使用vue、vue-cli来搭建项目。vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题。

在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修改webpack配置项。

但在Vue-CLI3.0中已经帮我们对webpack配置做了二次封装,在使用3.0版本搭建项目时,我们并不需要去关心原生webpack的配置,只需要查看Vue-CLI3.0官方API即可。

vue-cli3.0中的打包配置

vue-cli3.0的安装

npm install -g @vue/cli

使用vue-cli3.0搭建项目

vue create my-project

项目目录如下

vue cli 3.0通用打包配置代码,不分一二级目录

在创建好的项目中,并不存在webpack的配置文件。因为vue框架里,不需要知道如何配置webpack, 只需要在项目根目录下创建一个vue.config.js配置文件,通过vue-cli脚手架中的一些封装好的简单配置来实现即可。

Vue脚手架工具的宗旨是让用户配置起来更简单,所以在Vue-CLI3.0没有把webpack的一些配置项直接暴露给我们,而是在webpack的基础上再次封装了更简单的API,供我们使用。这样即便我们不会用webpack, 也可以通过一些简单的配置,对脚手架的一些打包配置以及打包流程做一些变更。

执行打包:npm run build

vue cli 3.0通用打包配置代码,不分一二级目录

vue-cli脚手架默认生成的打包目录为dist目录,如果我们想通过配置,改变打包生成的目录名称,可创建vue.config.js,通过outputDir来配置:

vue.config.js

module.exports = {
 outputDir: 'xiaochengzi' // 生成文件为xiaochengzi
}

再次打包:npm run build

vue cli 3.0通用打包配置代码,不分一二级目录

vue-cli对webpack的output.path做了再次封装,所以我们仅仅通过一个键值对outputDir: 'xiaochengzi'即可实现配置的更改。事实上,脚手架底层使用的还是:output.path

//vue-cli的api
outputDir: 'xiaochengzi'

//底层会通过webpack的配置项output.path实现
output: {
 path: path.resolve(__dirname, 'xiaochengzi')
}

以上只是举个例子,更多vue-cli配置需求请参考官方文档:Vue-CLI(查看官方详解)

特殊需求

项目中如果有特殊配置需求,Vue-CLI官方提供的配置API里无法实现的话,我们也可以通过官方预留的configureWebpack来对原生的webpack进行配置。

举个小栗子:

在刚刚创建好的项目根目录下新建static目录,在static目录下新增index.json文件:

vue cli 3.0通用打包配置代码,不分一二级目录

通过打包运行,我们想在浏览器通过访问localhost:8080/index.json直接可以访问到我们的json对象,不做配置的情况下,在浏览器访问显示如下:(还是初始页面)

vue cli 3.0通用打包配置代码,不分一二级目录

通过configureWebpack来对原生的webpack进行配置:

const path = require('path');
module.exports = {
 configureWebpack: { // 对原生的webpack进行配置 
 devServer: {
  contentBase: [path.resolve(__dirname, 'static')]
 }
 }
}

此配置标识:当访问指定文件时,webpack-dev-server服务不光回去打包后的dist目录下去查找文件,还会去static目录下查找文件,找到匹配文件后,既返回匹配文件内容。

再次打包运行:npm run serve

浏览器访问localhost:8080/index.json,显示结果如下:

vue cli 3.0通用打包配置代码,不分一二级目录

总结:Vue-CLI3.0不仅帮我们做了webpack的大量API的封装,还帮我们预留了不常用需求的配置接口,方便我们项目开发,减轻我们的学习难度(就算对webpack不太懂的情况下,也能通过阅读Vue-CLI官方文档,来轻松上手做webpack的配置)。

以上这篇vue cli 3.0通用打包配置代码,不分一二级目录就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
详解小程序循环require之坑
Mar 08 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 #Javascript
JavaScript this关键字指向常用情况解析
Sep 02 #Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 #Javascript
JavaScript Array.flat()函数用法解析
Sep 02 #Javascript
通过实例解析JavaScript常用排序算法
Sep 02 #Javascript
手把手教你实现 Promise的使用方法
Sep 02 #Javascript
如何基于jQuery实现五角星评分
Sep 02 #jQuery
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php获取apk包信息的方法
2014/08/15 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python字符转换
2008/09/06 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
高中教师考核方案
2014/05/18 职场文书
网站推广策划方案
2014/06/04 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python