Vue 傻瓜式项目上线流程

• 本文将教你学会如何将已完成的项目进行打包上线
• 只需根据以下 宋丹丹三步法 进行操作即可
  1. 打包项目
  2. 上传项目
  3. 配置项目
• 一切未尽事宜，请在浏览器地址栏输入以下内容自行了解
  • https://www.baidu.com/

1. 项目打包

• 在项目第一层级目录下执行打包指令

$ npm run build

• 运行成功后，你的项目目录中会多出一个 dist 文件夹

2. 上传至 Web 服务器

• 在远程桌面连接打开你的服务器
  • 进入到 nginx-1.16.1\html 目录（版本号可能不同，但目录一样）
  • 删除该目录下的所有文件（也可新建一个文件夹将所有文件存进去）
  • 以上操作是为了防止文件重名
• 返回你的本地电脑的桌面，找到刚刚打包完成的项目中的 dist 目录
• 双击进入 dist 目录，全选并复制 dist 目录下的所有文件
• 返回远程桌面连接的服务器的窗口
  • 在服务器中的 nginx-1.16.1\html 目录粘贴刚刚复制的文件

3. 配置 nginx 服务器

• 找到 nginx 文件夹下的 nginx-1.16.1\conf\nginx.conf 文件
• 右键用记事本打开进行，Ctrl + F 查找代理 proxy 关键字所在行
  • 也可复制到本地电脑的编辑器进行操作
  • 大约在第 57 行左右，如会出现如下代码：

# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
# location ~ \.php$ {
#    proxy_pass   http://127.0.0.1;
# }

• 将以下代码复制到上面这段代码之后（本段文字不需复制）：

location ^~/(vue.config.js中的名字)/ { 
   proxy_pass   http://ustbhuangyi.com/;
}
location ^~/(vue.config.js中的名字)/ {
   proxy_pass   https://u.y.qq.com/;
}

• 上面的路径名可根据你的项目中 vue.config.js 文件内的配置名自行修改

devServer: {
  proxy: {
    // 复制 `/` 后面的名字到服务器的配置文件
    '/chicken': {
      target: 'http://ustbhuangyi.com/',
      changeOrigin: true,
      pathRewrite: {
        '^/chicken': ''
      }
    },
    // 复制 `/` 后面的名字到服务器的配置文件
    '/foo': {
      target: 'https://u.y.qq.com',
      changeOrigin: true,
      pathRewrite: {
        '^/foo': ''
      }
    }
  }
},

• 如已启动 nginx 服务器，需重启 nginx 服务器
• 在 nginx 目录下打开命令行，执行以下代码：

$ nginx -s reload

• 如果未启动 nginx 服务器，则执行以下代码：

$ start nginx

• 恭喜你，你的项目已上线！