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
分类:
vue.js安装配置
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
2021-05-07 linux:在fedora 32/ubuntu 21.04安装chrome 90浏览器
2020-05-07 nginx安全：配置ssl证书(https证书)
2020-05-07 centos8:linux平台查看线程(ps/pstree/top)