我用vue开发的一个小项目,项目开发出雏形,想打包一下放测试,但是我想放测试前自己检查一下经过npm run build打包生成的项目,在本地服务器能不能正常跑,于是,经过网上大哥的帮忙,写了个简易的koa服务器,将打包好的dist文件,放到了服务器上。

说一下我的dist文件的结构,dist/index.html       dist/static      然后static目录下有打包好的js  css  img 文件,里面包含打包好的文件

再说一下koa服务器,服务器入口文app.js          监听的3000 端口,   用localhost:3000 就可以访问到

然后vue.config.js目前没有做任何配置   publicpath的默认值就为“/”

然后我再localhost:3000端口访问    结果页面白屏!!!   network里资源状态码都是200    控制台有报错   如下:

Uncaught SyntaxError: Unexpected token <

蒙圈了有没有!!!  这是什么错。。。  经过我在网上的查找,估计是引用静态资源路径问题(因为网上很多,说白屏是静态资源路径引起的,然后报的相同的错)

网上也说到过很多,部署时需要配置vue.config.js里面的baseurl的值,但是我用的vue3.70版本   目前最新。官方让舍弃baseurl的配置,用publicpath来代替,于是,我hack了很多中配置方法,都不行。必须的知道哪里路径错了才行,好,现在来看看,空白页network里静态资源的引用路径,如下:

http://localhost:3000/static/css/app.9977a20f.css

发现问题了谬????!!!!

http://localhost:3000是我服务器的根      是相对于koa里app.js的路径    而和app.js同级的是dist文件夹,这里存放着index.html  和statick文件夹   
按正常逻辑,这个域要访问到html页面 有两种办法 一是将dist这一层去掉,用上述路径可以访问到index.html和statick文件 二是:
http://localhost:3000/dist/statick/css/app.css 才能正常访问到,于是,我先试了第一种,把dist里的文件都拿了出来,放在了与app.js同级的目录下,然后页面正常显示了。
但是我觉的这不是最好的解决办法,我应该在vue中配置,将静态资源的访问路径前加上一个dist 也就是变成第二种访问路径,那么vue.config.js的publicpath该上场了
配置如下:
//基本路径(相对于服务器根目录   静态资源的相对路径)
publicPath: process.env.NODE_ENV === "production" ? "/haha/" : "/",

然后打包构建,放到服务器,好了,页面出来了!!!!明白了吗???

再来看看现在的引用app.css的路径

http://localhost:3000/haha/static2/css/app.9977a20f.css

这样就对了嘛。。

这也更好理解了publicpath的作用

另外想说一些不是太相关的知识(关于路径的)

.  :一个点  表示一个级别的目录   ./  表示当前目录下的目录    ../   表示上级目录  ../../  表示上级目录的上级目录  这对配置路径比较有帮助

另外  /   与  ./  的区别

/    :表示跟目录  是绝对路径

./   :是相对路径    是相对于index.html的路径

具体看下边

/   网站根路径 

./  当前路径

../ 上一级路径

../../  上两级路径

 

例如:本地静态网站 index页面地址  127.0.0.1/bootstrap_test/index.html在这里页面里面引入css和js路径应该怎么写呢?

1、

<link href="css/bootstrap.min.css" rel="stylesheet">  实际请求地址为:127.0.0.1/bootstrap_test/css/bootstrap.min.css 

找的是:和index.html  同级目录下的css文件里面的

 

2、

<link href="./css/bootstrap.min.css" rel="stylesheet">  实际请求地址为:127.0.0.1/bootstrap_test/css/bootstrap.min.css 

  找得是:和index.html  同级里面的css文件里面的

 

3、

 

<link href="/css/bootstrap.min.css" rel="stylesheet">  实际请求地址为:127.0.0.1/css/bootstrap.min.css 

      找的是根目录下面的css

4、

 

<link href="../bootstrap_test/css/bootstrap.min.css" rel="stylesheet">  实际请求地址为:127.0.0.1/bootstrap_test/css/bootstrap.min.css 

找得是:index.html上一级也就是和bootstrap_test处于同级里面的css文件里面的

vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法的更多相关文章

  1. 为何webpack打包后的文件要放在服务器上才能运行

    为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...

  2. 「Vue」vue cli3项目打包为APP方法及坑点

    1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...

  3. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  4. vue cli3项目发布在apache www/vue目录下并配置history路由

    注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...

  5. vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,we ...

  6. vue项目 build之后发布到服务器index.html页面空白解决方法

    第一部分 之前一直不太理解为什么要使用vue+webapck,还有在使用了vue-cli之后会用到后台,即vue-cli自动帮我们安装了express服务器,在本地服务器上运行,因为我们希望可以模拟在 ...

  7. iis7下url重写后,已存在的html不能访问了(未能执行URL)的解决方法

    iis7下url重写后,原本存在的html不能访问了,未能执行URL(asp.net对真正的.html(但不符合重写规的)就不知道如何处理了),遇到类似情况的朋友可以参考下   当把.html的url ...

  8. vue cli3 项目优化

    vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空 ...

  9. vue cli3项目中使用qrcodejs2生成二维码

    组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...

随机推荐

  1. windows server 2008 R2 Enterprise 防火墙开启允许远程桌面登录

    解决方法: 开始------ > 运行 ----- > gpedit.msc 打开“本地组策略编辑器”,按如下设置:计算机配置----->管理模板----->网络-----&g ...

  2. hashMap,hashTable,TreeMap,concurrentHashMap区别

    hashMap: 基于哈希表实现 treeMap: 基于二叉树实现,适用于排序 hashTable: 底层还是HashMap,在方法上加了同步 concurrentHashMap: java7底层通过 ...

  3. 帝国cms常用标签

    .loop获取时间标签 /*获取年月日,时分秒.可以按照自己的需求单独获取年,或者月.*/ <?=date("Y-m-d H:i:s",$bqr[newstime])?> ...

  4. VUE神速搭建项目

    1.npm install -g vue-cli 全局安装vue-cli脚手架 2.vue init webpack vueTest 初始化一个基于webpack的项目 3.cd vueTest 进入 ...

  5. java9 新特征

    Java 平台级模块系统 java模块化解决的问题:减少Java应用和Java核心运行时环境的大小与复杂性 模块化的 JAR 文件都包含一个额外的模块描述器.在这个模块描述器中, 对其它模块的依赖是通 ...

  6. 解决'androidx.arch.core:core-runtime' has different version for the compile (2.0.0) and runtime (2.0.1)

    先说原因,我们引用的包版本不同产生了冲突,所以编译不通过.解决的办法是在引用的时候排除一个版本,只留一个版本. 解决过程: 先找出哪些库引用了相同的库,仅仅是版本不同. gradle app:depe ...

  7. SmartBinding与kbmMW#3

    前言 在SmartBinding #2中,我介绍了新的自动绑定功能,支持在Form设计器中直接定义绑定.不仅如此,kbmMW SmartBind还有更多很酷的功能,即将发布的kbmMW中的SmartB ...

  8. 学习--Spring IOC源码精读

    Spring核心IOC的源码分析(转载) 原文地址:https://javadoop.com/post/spring-ioc#toc11 转载地址:https://blog.csdn.net/nuom ...

  9. 写Java也得了解CPU–CPU缓存

    CPU,一般认为写C/C++的才需要了解,写高级语言的(Java/C#/pathon…)并不需要了解那么底层的东西.我一开始也是这么想的,但直到碰到LMAX的Disruptor,以及马丁的博文,才发现 ...

  10. SYSLINUX官方文档

    帮助正确认识SYSLINUX http://www.syslinux.org/wiki/index.php/Doc/syslinux http://www.syslinux.org/wiki/inde ...