vue项目部署到非根目录下的问题及解决
短信预约 -IT技能 免费直播动态提醒
问题描述
同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。
eg. ：
- vue-router: history模式
- 内网环境：192.168.1.1:8080/index.html
- 外网环境：domain.com/ttsd/index.html
由于开发出来的项目是要部署在客户方，且客户并不想单独拿一个域名（或子域）来部署，这时，打包后的程序就要作一些配置方面的修改了。
解决方案
1、Vue配置
Vue 2
将 config/index.js 里的 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "/app/", //修改打包后路径 修改这里
Vue 3
在根目录下新建 vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）
module.exports = {
publicPath: '', // 相对于 HTML 页面（目录相同）
}2、修改路由
- 在路由的history模式下，所有的路由都是基于根路径的，如 /xxxx ，由于部署目录未知，所以我们可以根据 location.pathname 来获取到当前访问的文件路径，来修改路由。
- vue-router里提供了一个base的属性
- base类型: string 默认值: "/" 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/" 。
router => index.js
增加基础路径 base:"/app/"
const router = new Router({
mode: "history",
// base: getAbsolutePath(),
base: "/app/",
routes: [...]
......动态获取根路径
function getAbsolutePath () {
let path = location.pathname
return path.substring(0, path.lastIndexOf('/') + 1)
}
const routers = new Router({
mode: 'history',
base: getAbsolutePath(),
...
})vue项目部署在非根目录下的配置
版本
注：使用版本较新，项目结构可能存在差异。
vue项目配置
class="lazy" data-src/vue.config.js -- 打包配置（我理解的是打包配置，不确定是不是）
module.exports = {
publicPath: '/pgcweb/',
class="lazy" data-src/router/index.js -- 路由配置
const router = new VueRouter({
base: '/pgcweb/',
//mode: 'history',nginx配置
location ^~ /pgcweb{
alias /xxx/xxx/xxx/dist;
try_files $uri $uri/ /pgcweb/index.html;
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
