vue.js3: 项目打包后部署到网站子目录(vue@3.2.33)
一，修改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://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue-js3-xiang-mu-da-bao-hou-bu-shu-dao-wang-zhan-zi-mu-lu/
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
二，测试效果
1,发布
liuhongdi@lhdpc:/data/vue/guotou$ npm run build
2,发布到线上后再访问:
涉及到的资源均可以访问
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
