vue-cli3.0碎碎念之vue.config.js基本配置

碎碎（本人昵称）这几天捣鼓了一下新框架的配置，其中遇到了很多让人恼火焦躁的问题，如果出生后孩子长得丑，就得怪这个框架！

言归正传哈！

大家都知道运行yarn build命令是进行程序打包，打包完成后自动生成一个dist文件夹，如下：

碎碎遇到了一个问题就是index.html打开后一片空白，F12打开控制台，果然看到一片红色，很是喜气洋洋，呵呵。

报错信息

聪明的碎碎立马意识到这是config配置中的assetsPublicPath路径问题。

上次写得的安装的文章中，我们得知vue-cli3.0经过升级精简，目录文件所剩无几，config文件也被精简掉了，那我们应该在哪儿修改路径呢？

注意此图倒数第二个js文件，就是它了！！！

原来在vue-cli3.0中我们需要自己新建一个config文件，固定名称叫——vue.config.js，该怎么配置呢，我们来探索一下。

我使用的配置都是框架搭建时遇到问题时现加的，并不全面。这个文件中还有很多可配置属性，文章末尾我会甩给大家链接，大家自行查看。废话不多说，甩我的配置清单。

vue.config.js基本配置

做人要专一，所以我们先解决上文那片喜气洋洋的红色报错。

上文中的报错是因为打包后找不到本地路径所导致，我们就需要改变路径，所用到的参数就是上图中的第9行和第10行了.主意我后面的注释，这两个参数是有版本要求的。因为我是最新版本，所以我用了publicPath这个属性，只需要把这个属性设置为publicPath : ' ./ ' 即可。再次运行yarn build命令，重新生成dist文件夹，双击打开index.html,嘿嘿嘿，可以啦！

页面出来啦！

有道是家中红旗不倒，家外彩旗飘飘，上面的糟糠之妻解决完了，该去瞧瞧本文的真香小妾了！

书接配置那个图，碎碎官人儿今天主要说一下这个别名美人儿！

世人常说人靠衣裳马靠鞍，为了我们其他页面互相调用时写路径方便，不用../，../../、../../../……无穷无尽……，我们必须要好好的设置一下别名！

首先我们先加上如下代码（别问我啥意思，问我我就说看注释！）：

注意第13行：config.resolve.alias ，就是alias这个属性。

，

看14、15行的写法：.set(1,2)中有两个参数,1是给相对应的路径起的别名，2是相对应的路径。这个别名可以设置多个，图中我只设置了两个，喜欢多设置就.set往后顺着加就行。我们再看看在页面中引用的写法。上图可见，我们给src取名叫@，之后我们要引用src下的文件，比方在'src/components/Count.vue'引用'src/vuex/store.js'不再需要用../返回上一级查找，而是直接@/vuex/store.js就可以了！参考下面两图

文件目录

具体写法

好了！就到这儿吧！乏了，下回见！

哦哦，忘记甩链接了，真是应了那句老话，一孕傻三年。

配置参考 | Vue CLI

上面的蓝字，直接点进去就是官网配置详解，这回真走了，么么哒(づ￣ 3￣)づ