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依赖页面。

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

vue如何写静态页面
Vue.js 是一个 JavaScript 框架,用于构建用户界面.它可以帮助您快速构建动态的单页应用程序,但也可以用于构建静态页面. 要在 Vue.js 中构建静态页面,请按照以下步骤操作: 创建一 ...
TIA博途WINCC中英文切换的项目中摄氏度符号无法正常显示的解决办法
TIA博途WINCC中英文切换的项目中摄氏度符号无法正常显示的解决办法问题概述组态了中英文切换的多语言项目,有些应用场合在数值显示时需要标注单位,例如:摄氏度符号°C. 常见的问题是切换显示语言为 ...
vue 打包html静态页面,Vue.js打包部署到服务器路径资源和页面404
默认根目录路径在我们开发完vue项目后进行代码执行npm run build命令后,默认index文件引用静态资源路径是在/static下的,如下图: 更改根目录路径找到build/config/ ...
Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时
概述 Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签 ...
Vue项目中使用proxyTable配置代理失效的解决办法
花了一天的时间,卡在了配置代理这...总是报如下错误: 502 bad gateway意思就是Web 服务器作为网关或代理服务器时收到无效的响应,接着再查看浏览器开发者工具下的Network, loc ...
vue使用XSLX，用CDN引入后下载的excel文件无法打开的解决办法
目的:优化首屏加载速度使用npm打包的体积: 引用cdn打包后的体积: 使用npm安装在项目里的xlsx插件,下载的文件是没问题的,但发现了引入CDN后下载的文件无法打开: 解决办法:查看node_ ...
tomcat 启动项目页面文字乱码_eclipse启动tomcat项目乱码而终端启动tomcat正常的解决办法...
部署在eclipse上的web程序访问会出现乱码,只要是涉及到中文增删改,string转码都会出现乱码,eclipse上使用的是tomcat服务器,数据库是oracle.而直接使用tomcat部署程 ...
SpringBoot 项目返回时间日期、格式不正确解决办法
文章目录 SpringBoot 项目返回时间格式不正确解决办法 1.遇到问题 2.解决方法 (1)问题所在 (2)如何解决 (3)效果 SpringBoot 项目返回时间格式不正确解决办法今 ...
vs创建html页面提示未找到,VS2015 打开html 提示未能完成操作解决办法
interpreter(解释器模式) 一.引子其实没有什么好的例子引入解释器模式,因为它描述了如何构成一个简单的语言解释器,主要应用在使用面向对象语言开发编译器中:在实际应用中,我们可能很少碰到去构 ...

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

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

最新文章

热门文章