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
得到这个文件文件夹后,存储到 Gitee 上,最后会给一个在线网址,可以开放访问