zoukankan      html  css  js  c++  java
  • 前端项目线上部署记录 | vue-cli

    一、修改公开路径后打包;npm run build

    新建一个vue.config.js文件,如果本地打开,则路径为"./',线上则'/',不加'.'

    module.exports = {
      publicPath: '/'
    }

    二、在同一个域名同一个端口下配置多个项目时,需要修改三个地方的路径(假设新项目文件夹名称为manage)

    1、在vue.config.js中

    module.exports = {
      publicPath: '/manage/'
    }

    2、在router/index.js中

    .....
    const router = new VueRouter({
      // mode: 'history',
      base: '/manage/',
      routes
    })
    
    export default router

    3、在主页面index.html中

    <meta base='/manage/'>

    三、上传打包后dist里面的文件至服务器

    xshell操作nginx,xftp上传文件,需要的信息有域名、用户名、密钥,还有nginx的位置

    我这个项目实际配置nginx的位置和whereis nginx找到的不一样,还是要和服务器管理员沟通一下

    四、配置nginx

    • 同一个端口配置多个项目的时候,只有一个路径下名称为root,其他为alias标识,且最后要加'/'结束,
    • try files位置也不一样
    server {
          listen       9099;
          server_name     localhost;
          location / {
                root   /xx/xx/front;
                try_files  $uri $uri/ @router;
                index      index.html;
          } 
          location /manage{ 
              alias  /xx/gxx/manage/;  
              try_files $uri $uri/  /manage/index.html;  
              index      index.html; } 
          location @router {
                rewrite ^.*$ /index.html last;
          }
          location /icon {
                root   /xx/xx;
          }
    }

    五、访问的位置

    (本小白就栽在了这一步)

    location为'/'的访问位置为host/xx/xx/index

    location为'manage/'的访问位置为host/manage/xx/xx/index

    注意是放在文件夹名称的前面的

  • 相关阅读:
    Python基础-面向对象1
    Centos升级安装.Net core 1.1
    员工大规模离职事件的处理方法和启示
    React Redux学习笔记
    Tfs 2015 代理池配置笔记
    自动化测试UI Test, Performance Test, Load Test 总结整理
    [转]【长文干货】浅析分布式系统
    .Net身份验证概述
    Owin中间件搭建OAuth2.0认证授权服务体会
    使用Owin中间件搭建OAuth2.0认证授权服务器
  • 原文地址:https://www.cnblogs.com/guoguocode/p/13902811.html
Copyright © 2011-2022 走看看