Vue-CLI3项目打包静态部署非根目录（Tomcat，github pages等）

最新推荐文章于 2022-12-01 16:05:36 发布

易01

最新推荐文章于 2022-12-01 16:05:36 发布

阅读量1k

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/u012733501/article/details/105833397

版权

39 篇文章 0 订阅

订阅专栏

vue 打包之后项目需要部署到tomcat（github pages）静态。如果采用vue-cli3 自己脚手架生成的默认配置，那么只能配置到tomcat的根目录上（Root内）

而想部署非根目录（自己的项目）

在 vue.config.js 中设置正确的 publicPath：
例如：你想设置https://域名/自定义名/这种格式，那么只需要设置

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/自定义名/'
    : '/'
}

例如：http://www.test.com/myproject/ 这种格式
则配置如下：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/myproject/'
    : '/'
}

然后在tomcat 中新建myproject文件夹，放入你打好的包即可

后记：
直接输出打包文件名

outputDir:'myproject'

因为项目是vscode 中的jsconfig.json也要进行处理一下

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

exclude：告诉语言服务哪些文件是什么文件，而不是源代码的一部分。这使性能保持在较高水平。如果IntelliSense速度很慢，请将文件夹添加到排除列表中
所以这里要添加myproject

后记：可以设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

千里之行
始于足下

关注