npm发布vue脚手架项目在本地执行的配置

在一些项目中，我们需要把基于vue脚手架创建的项目通过npm run build发布到本地来运行，如果不修改任何配置，直接打开dist下的index.html文件后，页面一片空白，按浏览器F12键进入调试模式后，将看到js和css等资源文件找不到：

为解决该问题，需要修改项目的config/index.js文件，打开build属性下的assetsPublicPath，将它的值改成'./'，如下图所示：

修改之后，重新运行npm run build打包，此时，界面能看到内容了，但css中引用的文字图标却不能正常显示，如下所示：

通过对打包生成的dist\static\css\app.xxxxx.css文件分析发现，该文件内部@font-face对*.woff和*.ttf两种文件通过src:url引用时的地址不正确：

实际地址应该是@font-face{font-family:element-icons;src:url(../fonts/element-icons.535877f.woff) format("woff"),url(../fonts/element-icons.732389d.ttf) 

看到这里，有人可能会说，那我以后在打包完毕后，直接修改下这个文件不就可以了吗？

呵呵……，其实说的也对，这样做后，的确可以让资源正常引用了。但是不是low了点呢，我们需要的是自动化，是自动的把这个地址帮我们生成好，而不是打包发布后，还需要手动来改。要实现这个目的，实际也很简单，只需要在build/utils.js中，找到if (options.extract)所在行，然后添加publicPath: '../../'就可以了，如下图所示：

到了这里，我们再执行下npm run build，执行完毕后，看看最新效果：