zoukankan      html  css  js  c++  java
  • vue的elementUI失效等问题

    vue项目
    打包vue开发的项目在上传服务器的时候 只提交 dist文件
    其他所有源码都不需要提交(和码云,github等不一样)
    打包命令 npm run build

    打包踩过的坑

    分两大块(按路由模式)

    第一种 hash (默认)

    ①出现空白页
    config => index => bulid对象中 设置assetsPublicPath='./'
    ②背景图 无法解析
    更改build=>utils.js(大概47行的位置)=>

    if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath:'../../' //解决打包之后背景图无法解析路径
    
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }
    

    第二种 history(hash打包的配置不需要设置到 history中)

    打包之后空白报错

    swiper.min.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
    app.4b9eb7c85cdd8e9e259af71e2f3709e7.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
    manifest.2ae2e69a05c33dfc65f8.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
    vendor.2da1b8e13ef886da2f42.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
    app.218611c18e1a8a1a7b1a.js:1 
    

    不需要更改前端代码,需要后端进行配置
    当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
    不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

    Apache
    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
    </IfModule>
    

    除了 mod_rewrite,你也可以使用 FallbackResource。

    #nginx
    location / {
      try_files $uri $uri/ /index.html;
    }
    

    ==================================================
    打包的时候 需要你注意跨域问题
    上线之后跨域问题 是后端(服务器端 nginx等)去解决 跨域问题
    本地出现跨域问题 这个一般是在写项目调用接口的时候用的
    要在config=>index中
    设置proxyTable:{
    '/api':{
    target:'你要解决跨域的地址',
    changeOrigin:true,
    pathRewrite:{
    '^/api':"你要解决跨域的地址"
    }
    }
    }

  • 相关阅读:
    ASP.NET MVC 4高级编程(第4版)
    Unity3d报告奇怪的错误CompareBaseObjectsInternal can only be called from the main thread.
    HDU 4862 Jump(更多的联合培训学校1)(最小费用最大流)
    0,22, 47, 120,(? ),290
    它们的定义Activity跳转动画
    ssh探头安全
    Netty:一种非易失堵塞client/server相框
    Swift类和结构
    php+mysql+nginx于linux部署对环境
    javascript 次序li
  • 原文地址:https://www.cnblogs.com/caoxueyang/p/12980955.html
Copyright © 2011-2022 走看看