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属性,首先修改静态文件的路径,打包后静态文件在当前目录下,所以修改为./,如图

vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法_第1张图片

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

vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法_第2张图片

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

vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法_第3张图片

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

vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法_第4张图片

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

你可能感兴趣的:(vue,打包html静态页面)