Re: [請益] 關於static靜態檔案路徑設定消失

看板Web_Design作者LoserWon時間6年前 (2018/08/06 15:31)推噓0(0推 0噓 2→)

留言2則, 1人參與討論串2/2 (看更多)

※ 引述《miky2343 (Jie)》之銘言： : 各位前輩好，剛開始跨到Vue的世界 : 關於靜態檔案的路徑設置不太了解遇到了些問題請教一下 : 網站模式為SPA，開發上用vue-cli， : router設定為history模式 : 假設router設定如下圖 : https://i.imgur.com/TNeSOry.jpg

: 網頁url呈現http://xxxxxx/user/profile : 在static資料夾裡有第三方套件 : 在index.html引用第三方css，如下設定 : <link rel="stylesheet" href="./static/css/something.css"> : 從首頁進入在切換到/user/profile頁面則沒有任何問題 : 但是停留在http://xxxxxx/user/profile重新整理頁面，something.css就會找不到變成 : 404了 : (history模式server端有協助設定404 rewrite) : something.css解析的路徑會變成 : http://xxxxxx/user/static/css/something.css : 在網路上有查過相關資料，有提到把路徑設為 : <link rel="stylesheet" href="/static/css/something.css"> : 這樣就會直接到根節點css路徑就會正常 : 但是客戶在架站上可能會是這樣的設定 : - root site : ├ website : 實際上網頁是在website這層 : 真實網址為 : http://xxxxxx/website/user/profile : 如果把路徑設為/static/css/something.css : 則css路徑會解析為http://xxxxxx/static/css/something.css : 直接解析到root site根節點去了... : 今天花了4 5個小時都找不到解答 : 請求各位指點，謝謝 webpack設定問題解法： 1. 修改 > [yourProject]/config/index.js ... build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '../website/', ... 2. npm run build 3. 部署 4. 修改 > /website/index.html .. <link href=../website/static/css/something.css rel=stylesheet> .. 備註： /root => '/' (default) /root/website => '../website/' /root/[path]/website => '../[path]/website/' /root/website => '../website' (ending / missing => report chuck error while loading) 題外話： vue.js在使用上真的超級簡單，但部署就很像在玩猜謎遊戲 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.132.224.121 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1533540667.A.1E7.html ※ 編輯: LoserWon (220.132.224.121), 08/06/2018 15:37:16