vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法

Vue脚手架提供了一个命令npm run build进行打包项目，在package.json中有一个build属性，对应执行命令node build/build.js。执行成功后，项目目录下多了一个dist目录，dist目录下有static目录和页面index.html。static目录下有css、fonts、js文件。但是这样直接打包后会出现空白界面问题，因此在打包之前需要修改配置文件再打包。空白界面问题主要就是路径的问题，所以需要修改config目录下(使用的是完整的vue init webpack模板才会有config目录)的index.js配置文件里的选项。找到build属性，首先修改静态文件的路径，打包后静态文件在当前目录下，所以修改为./，如图

然后将环境设置为生产环境，productionSourceMap修改为false，修改后保存，打开cmd运行的命令cnpm run build打包即可

注意下面的提示，这个打包后的文件需要放到服务器才能打开，不能直接使用浏览器打开，打包后的文件结构如图所示。

打包好的文件放到web服务器上，访问index.html就可以使用WebApp了。访问浏览器，可以开始使用WebApp，打开控制台发现打包后dist目录中的JavaScript文件，CSS文件已经被加载

2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。