一、修改公开路径后打包;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

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

巴特西

前端项目线上部署记录 | vue-cli

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

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

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

四、配置nginx

五、访问的位置

最新文章

热门文章