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':"你要解決跨域的地址"
}
}
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM