zoukankan      html  css  js  c++  java
  • vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法

    我用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文件里面的
  • 相关阅读:
    curl命令详解
    Linux 下 set env export declare浅浅 set和shopt命令详解--(shell定制) (转载)
    ps aux指令詳解
    smb设置参考手册 --详细参数
    Ajax
    JSON浅谈
    Date类型
    笔记本电脑不能上网的问题
    editplus 初步设置
    w10 系统升级
  • 原文地址:https://www.cnblogs.com/fqh123/p/10850311.html
Copyright © 2011-2022 走看看