如何将多个vue项目部署至同一个域名下

因为自己写的博客网站前后台有两个vue项目，所以想把他放置在一个域名下；而且前后台还是用的不同的组件库（Element-ui、Iview）甚至是不同版本的vue-cli。晕(((φ(◎ロ◎;)φ)))，好了不说了我现在把配置的步骤记录下来。

1、配置路由

// 部分路由配置代码 
// vue-cli 2.96
export default new Router({
  mode: 'history', // 设置路由模式
  base: 'app', // 这里设置的是部署在子站点的名字
  routes: [
    {
      path: '/',
      redirect: '/index'
    }
  ]
})
// @vue/cli 4.0.5
// 这里使用的是vue-template-admin后台模板内的router.js
// 配置基本一致
const createRouter = () => new Router({
    mode: 'history',
    base: 'admin',
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})

2、配置config/index.js

@vue/cli3.0之后的可以在根目录新建一个vue.config.js文件进行配置

// vue-cli 2.96
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/app/', // 配置这里，原理跟上面的路由配置类似
    proxyTable: {},
  }
 // 省略下面代码
}

// @vue/cli 4.0.5
module.exports = {
  publicPath: '/admin/', // 因为我用的是模板，人家表明了是要改这个(*^_^*)
  outputDir: 'dist',
  assetsDir: 'static',
}

这之后就是将需要部署的项目进行打包了~
3、nginx
重头戏来了！！

1. 下载，推荐下载中间那个稳定版
   nginx下载地址
2. 将下载好的文件解压至你需要放置的文件目录下，然后在当前文件夹下打开命令行窗口。
3. 基本命令
   启动服务：start nginx
   停止服务：nginx -s stop nginx -s quit
   修改配置后重新加载生效：nginx -s reload
   查看nginx版本：nginx -v
4. 如果你在启动服务的过程中屏幕就闪了一下，没什么反应，可以先任务管理器看一下服务有没有启动，或者直接去下logs下的error文件内查看原因，最常见的是端口号占用，因为我写的node.js监听的就是80端口，说下这种情况怎么解决：先打开conf/nginx.conf文件，修改成如下，我这里修改成的是8080：
   nginx成功启动服务后进行下一步
   4、配置nginx

首先将dist（vue打包后的项目文件）放置在指定的文件夹内，这里推荐放置在nginx目录下的html文件夹内。

我是这么放的，嘿嘿。
然后打开conf/nginx.conf文件，在server对象内添加

	location / {
	    root html;
            index  index.html index.htm;
	    try_files $uri $uri/ /index.html;
        }
	location /admin/ {
            alias html/admin/;
            index  index.html index.htm;
	    try_files $uri $uri/ /admin/index.html;
        }

然后就可以通过域名、域名+子站点访问指定内容了！
参考博客：
nginx同域名下部署多个vue项目
nginx同一域名下部署多个vue项目

最后

以上就是无聊机器猫为你收集整理的如何将多个vue项目部署至同一个域名下的全部内容，希望文章能够帮你解决如何将多个vue项目部署至同一个域名下所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。