vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue部署到非根目录下

vue项目部署到非根目录下的问题及解决

作者:Starzkg

这篇文章主要介绍了vue项目部署到非根目录下的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

问题描述

同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名根目录来访问,而外网却指向了一个子目录。

eg. :

由于开发出来的项目是要部署在客户方,且客户并不想单独拿一个域名(或子域)来部署,这时,打包后的程序就要作一些配置方面的修改了。

解决方案

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、修改路由

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项目配置

src/vue.config.js -- 打包配置(我理解的是打包配置,不确定是不是)

module.exports = {
    publicPath: '/pgcweb/',
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;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文