今天就跟大家聊聊有关Vue如何实现更改打包配置,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
1。项目根目录下新建vue.config。js,进行如下配置即可
module.exports={ publicPath: & # 39; & # 39; };
<>强Vue-CLI3.0更改打包配置强>
在实际项目开发中,我们一般会直接使用vue, vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题。
在前期使用Vue-CLI2.0搭建项目时,我们可以在构建目录下,直接修改webpack配置项。
但在Vue-CLI3.0中已经帮我们对webpack配置做了二次封装,在使用3.0版本搭建项目时,我们并不需要去关心原生webpack的配置,只需要查看Vue-CLI3.0官方API即可。
<强> Vue-CLI3.0中的打包配置强>
Vue-CLI3.0的安装
npm安装- g @vue/cli
引用>使用Vue-CLI3.0搭建项目
vue创建我的项目
引用>项目目录如下
在创建好的项目中,并不存在webpack的配置文件。因为vue框架里,不需要知道如何配置webpack,只需要在项目根目录下创建一个vue.config.js配置文件,通过vue-cli脚手架中的一些封装好的简单配置来实现即可。
vue脚手架工具的宗旨是让用户配置起来更简单,所以在Vue-CLI3.0没有把webpack的一些配置项直接暴露给我们,而是在webpack的基础上再次封装了更简单的API,供我们使用。这样即便我们不会用webpack,也可以通过一些简单的配置,对脚手架的一些打包配置以及打包流程做一些变更。
<强>执行打包:npm运行构建强>
vue-cli脚手架默认生成的打包目录为dist目录,如果我们想通过配置,改变打包生成的目录名称,可创建vue.config.js,通过outputDir来配置:
vue.config。js
模块。出口={ outputDir: & # 39; xiaochengzi& # 39;//生成文件为xiaochengzi }<>强再次打包:npm运行构建强>
vue-cli对webpack的输出。路径做了再次封装,所以我们仅仅通过一个键值对outputDir: & # 39; xiaochengzi& # 39;即可实现配置的更改。事实上,脚手架底层使用的还是:输出。路径
//vue-cli的api outputDir: & # 39; xiaochengzi& # 39;//底层会通过webpack的配置项output.path实现 输出:{ 路径:路径。解决(__dirname & # 39; xiaochengzi& # 39;) }以上只是举个例子,更多vue-cli配置需求请参考官方文档:vue-cli(查看官方详解)
<强>特殊需求强>
项目中如果有特殊配置需求,vue-cli官方提供的配置API里无法实现的话,我们也可以通过官方预留的configureWebpack来对原生的webpack进行配置。
<强>举个小栗子:强>
在刚刚创建好的项目根目录下新建静态目录,在静态目录下新增指数。json文件:
通过打包运行,我们想在浏览器通过访问localhost: 8080/索引。json直接可以访问到我们的json对象,不做配置的情况下,在浏览器访问显示如下:(还是初始页面)
通过configureWebpack来对原生的webpack进行配置:
const path=要求(& # 39;path & # 39;); 模块。出口={ configureWebpack:{//对原生的webpack进行配置 devServer: { contentBase:(路径。解决(__dirname & # 39;静态# 39;)) } } }此配置标识:当访问指定文件时,webpack-dev-server服务不光回去打包后的dist目录下去查找文件,还会去静目录下查找文件,找到匹配文件后,既返回匹配文件内容。
<强>再次打包运行:npm运行服务强>
浏览器访问localhost: 8080/索引。json,显示结果如下:
Vue如何实现更改打包配置