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 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
js实现动态显示时间效果
Mar 06 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
Js获取事件对象代码
2010/08/05 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
python实现Windows电脑定时关机
2018/06/20 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Python猜数字算法题详解
2020/03/01 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
如何理解python中数字列表
2020/05/29 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
培训主管岗位职责
2014/02/01 职场文书
企业总经理岗位职责
2014/02/13 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
HttpClient实现表单提交上传文件
2022/08/14 Java/Android