vue.js3: 專案打包後部署到網站子目錄([email protected])
阿新 • • 發佈：2022-05-07
一，修改vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
})
說明：增加了:
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
說明：劉巨集締的架構森林是一個專注架構的部落格，地址： https://www.cnblogs.com/architectforest
對應的原始碼可以訪問這裡獲取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
說明：作者:劉巨集締 郵箱: [email protected]
二，測試效果
1,釋出liuhongdi@lhdpc:/data/vue/guotou$ npm run build2,釋出到線上後再訪問: 涉及到的資源均可以訪問 3,比較編譯後的html程式碼: 適配子目錄的程式碼
<!doctype html> <未適配子目錄的程式碼:html lang=“"> <head> <meta charset="utf-8”> <meta http-equiv="X-UA-Compatible" content="IE=edge”> <meta name="viewport" content="width=device-width,initial-scale=1”> <link rel="icon" href="favicon.ico”> <title>guotou</title> <script defer="defer" src="js/chunk-vendors.94170555.js"></script> <script defer="defer" src="js/app.ef205f82.js"></script> <link href="css/app.a7fb6e46.css" rel="stylesheet”> </head> <body> <noscript> <strong>We're sorry but guotou doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html>
<!doctype html> <html lang=“"> <head> <meta charset="utf-8”> <meta http-equiv="X-UA-Compatible" content="IE=edge”> <meta name="viewport" content="width=device-width,initial-scale=1”> <link rel="icon" href="/favicon.ico”> <title>guotou</title> <script defer="defer" src="/js/chunk-vendors.94170555.js"></script> <script defer="defer" src="/js/app.96c83661.js"></script> <link href="/css/app.a7fb6e46.css" rel="stylesheet”> </head> <body> <noscript> <strong>We're sorry but guotou doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html>可以看到:支援部署到網站子目錄後，專案打包時使用了相對路徑
三，檢視vue的版本:
liuhongdi@lhdpc:/data/vue/guotou$ npm list vue guotou@0.1.0 /data/vue/guotou ├─┬ @vue/cli-plugin-babel@5.0.4 │ └─┬ @vue/babel-preset-app@5.0.4 │ └── vue@3.2.33 deduped └─┬ vue@3.2.33 └─┬ @vue/server-renderer@3.2.33 └── vue@3.2.33 deduped