vue.js 打包时出现空白页和路径错误

vue-cli输入命令：npm run build 即可打包vue.js的项目

打包出来后项目中就会多了一个文件夹dist，下图为我们打包过后的项目

我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。

解决：到config文件夹中打开index.js文件。

文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：

assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录，’./’指的是当前目录。

原文地址：https://www.cnblogs.com/guoliping/p/11088509.html

时间： 2024-08-18 22:53:21

vue.js 打包时出现空白页和路径错误的相关文章

vue-cli项目打包出现空白页和路径错误问题

vue-cli项目打包: 1. 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 第一个问题,文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsP

vue.js打包生成配置文件（参考）

第一步:安装generate-asset-webpack-plugin插件 cnpm install generate-asset-webpack-plugin --save-dev 第二步:配置build/webpack.prod.conf.js文件 //打包时输出可配置文件 const GenerateAssetPlugin = require('generate-asset-webpack-plugin') const createServerConfig = function (comp

Visual Studio 2010 进行Winform打包时提示不可恢复的生成错误解决方案

参考:http://blog.csdn.net/xingqingxiang/article/details/7198076 在进行Visual Studio 2010 进行Winform打包时,提示不可恢复的生成错误,很是郁闷, 在网上搜了好多方法都是不行,无奈自己找办法,无意中发现了一个解决方法,希望能与大家分享下. 解决方法如下:1.在“开始 - 运行” 中输入以下内容分三次来重新注册下Mergemod.dll. regsvr32 "C:\Program Files\Common Fil

vue history模式下出现空白页情况

问题描述: vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = ne

bottle + vue.js 打造你的单页应用

看到各种单页应用之后,觉得单页应用简直酷毙了,作为一个技术宅,在假期的时候恶补了一下vue ,觉得还不错,不过想想前端的东西毕竟还是太广博了.我也不知道怎么写反正应用起来有点别扭,就是资料太少了,成型的东西也太少了,就说说简单的思路吧. vue相当于前段的框架,用于更新数据,废话不多说, 仅仅说应用引入vue 第一,我想做一个单页应用第二,静态文件又http服务器转发给客户端,而服务端就可以不参数与这些文件的更新,仅仅保持数据通讯即可第三,假期确实闲着无聊,我是知道react 的,但是纠

vue项目打包之后页面空白解决办法

之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方一.修改 assetsPublicPath 在config/index.js里面,有个 assetsPublicPath 属性,源码是'/',修改成'./',加个点 assetsPublicPath: '/',二.路由模式将histroy改成hash模式,起初 mode:'history' const router = new

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

在config/index.js中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到. 解决办法:改为‘./’这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找. build: { ... assetsPublicPath: './', 原文地址:https://www.cnblogs.com/223zzm/p/11259104.html

Vue.js——打包之后资源路径产生问题

https://blog.csdn.net/qq_30632003/article/details/79353035 https://www.cnblogs.com/diantao/p/7776523.html 对于url,下面的设置比较可行,通过 require 引入 <template> <div class="recImage"> <div :style="{backgroundImage:'url('+urlData+')'}"

android打包时***is not translated in zh错误

现象描述: android项目,使用eclipse打apk包时,报错: strings.xml等资源文件***is not translated in zh 解决方法: 项目树选中鼠标右键 - Properties - Android Lint preferences - MissingTranslate 键值改为warning.