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

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脚手架默认生成的打包目录为dist目录，如果我们想通过配置，改变打包生成的目录名称，可创建vue.config.js，通过outputDir来配置：

vue.config.js

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

再次打包：npm run build

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

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

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