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" ? "./" : "/",

说明：刘宏缔的架构森林—专注it技术的博客，
网址：https://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
阅读: 161

相关文章：

  1. vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
  2. 部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)
  3. vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
  4. vue.js3.2.6:路由处理404报错(vue-router@4.0.11)
  5. vue.js3.2.20: 使用svg(svg-sprite-loader@6.0.9)
  6. vue.js 3.2.20: 用photoswipe实现图片的浏览:增加切换动画和自动播放(photoswipe@4.1.3)
  7. vue.js 3.2.20：拖动创建div及移动、缩放、删除等操作
  8. vue.js 3.2.22：多选上传图片带缩略图可删除
QR:vue.js3: 项目打包后部署到网站子目录(vue@3.2.33)

发表回复