前端项目线上部署记录 | 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

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