vue项目使用域名部署(一个域名多个项目)

本文涉及的产品
.cn 域名,1个 12个月
简介: vue项目使用域名部署(一个域名多个项目)
  1. vue去掉访问路径中的#号
    在这里插入图片描述
    在router -> index.js中添加

    export default new Router({
          base: "/xi-music/", //项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:port/webSite
          mode: "history", //消去#
          routes: [
           ]
    })
  2. vue项目打包

在这里插入图片描述
build模块中将/ 改为 assetsPublicPath: '/xi-music/',该名称可以任意指定。
所有的静态资源都会加上该前缀。为什么要修改这个路径?默认访问 ‘/’ 不好嘛?

1、如果部署在tomcat中,会将打包的项目放入webapps下  通过路径名访问该目录(而目录一定要有名字)。
例如:localhost:8080/xi-music  访问的就是webapps目录下的xi-music 目录,访问的是默认的index.html
由于静态资源都加了/xi-music 前缀,都是可以正常获取到。而目录名是不能为‘/’的,如果为‘/’ 显然访问不到该项目。因此需要修改assetsPublicPath。服务器上部署tomcat同理

2、如果使用nginx + tomcat 依旧是这个道理

3、如果只使用nginx作为服务器,使用assetsPublicPath: ‘/’可能静态资源访问不到,修改为‘./’即可。也可修改为你项目的名称,不过此时访问项目时,请求路径需要携带项目名称。
例如:assetsPublicPath: ‘/xi-music/’。请求路径应为 'ip:port/xi-music'。 nginx 服务器会去root 路径下,找/xi-music 目录


项目打包
```bash
npm run build
```
  1. 服务器部署多个项目(使用前需要开启二级域名/三级域名等,添加主机记录即可)
    进入nginx的config

    #项目1    注意看域名
    server{
        listen 80;
        server_name: www.xxx.com   #域名为:www.xxx.com
       location / {
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass http://tomcats; //负载均衡
        }
        access_log  /www/wwwlogs/access.log;
    }
     
    #项目2(vue项目)  注意当前域名
    server {
        listen 80; 
        server_name  www.m.xxx.com;  #域名为:www.m.xxx.com
        location / {
            root   /usr/local;
            index  index.html index.htm;
            try_files  $uri $uri/ /xi-music;
        }
    
           location /api { 
               rewrite  ^/api/(.*)$ /$1 break;
               proxy_pass   http://127.0.0.1:3000;
        }
    }

    部署了两个项目,使用的是一个一级域名和二级域名,nginx监听统一端口80,当通过域名访问 www.xxx.com时访问的是项目1,当通过域名访问 www.m.xxx.com时访问的是项目2(vue项目跨域解决)。

    为什么能这样访问呢?
    当客户端发送请求时,请求头中通过host属性,记录当前访问的域名,同样是访问的80端口,nginx解析请求头,发现域名不一样,通过server模块中的server_name进行匹配,交给匹配的server块处理

相关文章
|
2月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
128 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
2月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
200 2
|
2月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
42 3
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
29天前
|
负载均衡 网络协议 安全
slb多站点或多域名部署
slb多站点或多域名部署
35 4
|
2月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
137 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
23 7
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
2月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
39 6

热门文章

最新文章