原先部署的很多项目都是使用Nginx配置二级域名来完成的,每一个项目都要申请ssl证书,并且cdn还要单独设置,实在是太麻烦,遂决定将所有的二级域名项目都部署到网站的二级目录下,今天就来讲一讲Vue项目如何部署到网站的二级目录下

目前就只有一个Vue项目 -- Pornhub Youtube logo生成器

注意该项目是vue-cli 4完成,和其他版本vue-cli不兼容

目标

实施步骤

  • 修改vue.config.js
module.exports = {
    publicPath: './', //修改为相对路径
  • 修改src/router.js
export default new Router({
  mode: 'history',
  base: '/logo/',  //二级目录的名称
  • Nginx配置
主页配置
server {
        listen  80;
        .省略
        .省略

        location /logo/ {
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:7777/;  # 最后一定要有/
        }
}

Vue项目配置
server {
        listen       7777;  #选择合适的端口
        root    /home/logo/dist/; #你的项目路径
        index  index.html index.htm index.php;
}

大功告成

  • 欢迎光临来创建属于你的Logo --> Logo