首页 >> js开发 >> jsvue cli 3.0通用打包配置代码,不分一二级目录js大全
jsvue cli 3.0通用打包配置代码,不分一二级目录js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1.项目根目录下新建vue.config.js,进行如下配置即可
module.exports={
publicPath:'',
};
module.exports={
publicPath:'',
};补充知识:Vue-CLI3.0更改打包配置补充知识:补充知识: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中的打包配置vue-cli3.0的安装
npm install -g @vue/cli
npm install -g @vue/cli使用vue-cli3.0搭建项目
vue create my-project
vue create my-project项目目录如下在创建好的项目中,并不存在webpack的配置文件。因为vue框架里,不需要知道如何配置webpack, 只需要在项目根目录下创建一个vue.config.js配置文件,通过vue-cli脚手架中的一些封装好的简单配置来实现即可。Vue脚手架工具的宗旨是让用户配置起来更简单,所以在Vue-CLI3.0没有把webpack的一些配置项直接暴露给我们,而是在webpack的基础上再次封装了更简单的API,供我们使用。这样即便我们不会用webpack, 也可以通过一些简单的配置,对脚手架的一些打包配置以及打包流程做一些变更。执行打包:npm run build执行打包:npm run buildvue-cli脚手架默认生成的打包目录为dist目录,如果我们想通过配置,改变打包生成的目录名称,可创建vue.config.js,通过outputDir来配置:vue.config.js
module.exports = {
outputDir: 'xiaochengzi' // 生成文件为xiaochengzi
}
module.exports = {
outputDir: 'xiaochengzi' // 生成文件为xiaochengzi
}再次打包:npm run build再次打包:npm run buildvue-cli对webpack的output.path做了再次封装,所以我们仅仅通过一个键值对outputDir: 'xiaochengzi'即可实现配置的更改。事实上,脚手架底层使用的还是:output.path
//vue-cli的api
outputDir: 'xiaochengzi'
//底层会通过webpack的配置项output.path实现
output: {
path: path.resolve(__dirname, 'xiaochengzi')
}
//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文件:通过打包运行,我们想在浏览器通过访问localhost:8080/index.json直接可以访问到我们的json对象,不做配置的情况下,在浏览器访问显示如下:(还是初始页面)通过configureWebpack来对原生的webpack进行配置:
const path = require('path');
module.exports = {
configureWebpack: { // 对原生的webpack进行配置
devServer: {
contentBase: [path.resolve(__dirname, 'static')]
}
}
}
const path = require('path');
module.exports = {
configureWebpack: { // 对原生的webpack进行配置
devServer: {
contentBase: [path.resolve(__dirname, 'static')]
}
}
}此配置标识:当访问指定文件时,webpack-dev-server服务不光回去打包后的dist目录下去查找文件,还会去static目录下查找文件,找到匹配文件后,既返回匹配文件内容。再次打包运行:npm run serve再次打包运行:npm run serve浏览器访问localhost:8080/index.json,显示结果如下:总结:Vue-CLI3.0不仅帮我们做了webpack的大量API的封装,还帮我们预留了不常用需求的配置接口,方便我们项目开发,减轻我们的学习难度(就算对webpack不太懂的情况下,也能通过阅读Vue-CLI官方文档,来轻松上手做webpack的配置)。总结:总结:Vue-CLI官方文档以上这篇vue cli 3.0通用打包配置代码,不分一二级目录就是小编分享给大家的全部内容了,希望能给大家一个参考。
module.exports={
publicPath:'',
};
module.exports={
publicPath:'',
};补充知识:Vue-CLI3.0更改打包配置补充知识:补充知识: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中的打包配置vue-cli3.0的安装
npm install -g @vue/cli
npm install -g @vue/cli使用vue-cli3.0搭建项目
vue create my-project
vue create my-project项目目录如下在创建好的项目中,并不存在webpack的配置文件。因为vue框架里,不需要知道如何配置webpack, 只需要在项目根目录下创建一个vue.config.js配置文件,通过vue-cli脚手架中的一些封装好的简单配置来实现即可。Vue脚手架工具的宗旨是让用户配置起来更简单,所以在Vue-CLI3.0没有把webpack的一些配置项直接暴露给我们,而是在webpack的基础上再次封装了更简单的API,供我们使用。这样即便我们不会用webpack, 也可以通过一些简单的配置,对脚手架的一些打包配置以及打包流程做一些变更。执行打包:npm run build执行打包:npm run buildvue-cli脚手架默认生成的打包目录为dist目录,如果我们想通过配置,改变打包生成的目录名称,可创建vue.config.js,通过outputDir来配置:vue.config.js
module.exports = {
outputDir: 'xiaochengzi' // 生成文件为xiaochengzi
}
module.exports = {
outputDir: 'xiaochengzi' // 生成文件为xiaochengzi
}再次打包:npm run build再次打包:npm run buildvue-cli对webpack的output.path做了再次封装,所以我们仅仅通过一个键值对outputDir: 'xiaochengzi'即可实现配置的更改。事实上,脚手架底层使用的还是:output.path
//vue-cli的api
outputDir: 'xiaochengzi'
//底层会通过webpack的配置项output.path实现
output: {
path: path.resolve(__dirname, 'xiaochengzi')
}
//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文件:通过打包运行,我们想在浏览器通过访问localhost:8080/index.json直接可以访问到我们的json对象,不做配置的情况下,在浏览器访问显示如下:(还是初始页面)通过configureWebpack来对原生的webpack进行配置:
const path = require('path');
module.exports = {
configureWebpack: { // 对原生的webpack进行配置
devServer: {
contentBase: [path.resolve(__dirname, 'static')]
}
}
}
const path = require('path');
module.exports = {
configureWebpack: { // 对原生的webpack进行配置
devServer: {
contentBase: [path.resolve(__dirname, 'static')]
}
}
}此配置标识:当访问指定文件时,webpack-dev-server服务不光回去打包后的dist目录下去查找文件,还会去static目录下查找文件,找到匹配文件后,既返回匹配文件内容。再次打包运行:npm run serve再次打包运行:npm run serve浏览器访问localhost:8080/index.json,显示结果如下:总结:Vue-CLI3.0不仅帮我们做了webpack的大量API的封装,还帮我们预留了不常用需求的配置接口,方便我们项目开发,减轻我们的学习难度(就算对webpack不太懂的情况下,也能通过阅读Vue-CLI官方文档,来轻松上手做webpack的配置)。总结:总结:Vue-CLI官方文档以上这篇vue cli 3.0通用打包配置代码,不分一二级目录就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- jsvue 中的动态传参和query传参操作js大全
- jsJs数组扁平化实现方法代码总汇js大全
- jsWebpack的Loader和Plugin的区别js大全
- js解决vue watch数据的方法被调用了两次的问题js大全
- js详解nginx配置vue h5 history去除#号js大全
- JavaScriptnodejs中内置模块fs,path常见的用法说明
- JavaScriptNode.js path模块,获取文件后缀名操作
- js解决Vue watch里调用方法的坑js大全
- js解决vue init webpack 下载依赖卡住不动的问题js大全
- jsvue-axios同时请求多个接口 等所有接口全部加载完成再处理操作js大全