当你完成一个项目,如何打包上线

61 阅读1分钟

1. vue.config.js 配置

打包后index.html的依赖资源路径使用 ./ 相对路径而非使用默认的 /绝对路径。

module.exports = {
   
   publicPath: './',

   lintOnSave: false,

 }

目的:在部署的时候有可能除去域名外存在二级路径,导致资源路径出现问题。

  • 例如:部署在 http://www.itcast.cn/web/ 下加载 test.js 资源

    • 使用默认的 / 的时候 http://www.itcast.cn/test.js 错误
    • 使用配置的 ./ 的时候 http://www.itcast.cn/web/test.js 正确

结论:最好配置成 ./ 的相对路径,不管部署在任何目录下加载项目需要的资源才不会出现问题。

2. 线上接口切换

在开发时,有的时候为了开发效率会使用本地服务器,在上线时会转为网络地址,或者是公司服务器。

在本地开发的时候使用的是本地服务器 http://localhost:7001/ 但是当你在其他电脑的时候是访问不到本地服务器的。

需要在线部署接口服务器先,接口服务器已经提前部署完毕,地址是 https://juejin.cn/ , 那么在打包的时候就需要把 axios 的基准地址替换。

const instance = axios.create({


  baseURL: 'https://juejin.cn/', // 线上地址
  
  // baseURL: 'http://111.111.11.111:7001', // 本地地址,7001是默认端口号

  timeout: 5000 // request timeout
})

3.执行 npm 打包后得到 dist 文件夹。

npm run build

12.png

得到这个文件文件夹后,存储到 Gitee 上,最后会给一个在线网址,可以开放访问

13.png