把打包好的项目放到github托管的服务器上
步骤一、 在本地运行并调试项目,所有工作完成并且项目无误后 :
① 【必需步骤】dist目录下的default.js文件中:将 publicPath: '/assets/', 修改为:publicPath: 'assets/',
【注:./表示当前目录 ../表示父级目录 /表示跟目录】
② 【必需步骤】 使用:npm run dist 命令打包:打包完成后,dist文件夹里面会增加 assets文件夹和index.html文件
(【可选步骤】项目打包完成后 点击dist目录下的index.html文件就可以在浏览器看到效果 此时index.html和assets文件夹只要在同一个目录下就行,因为文件所需要的内容都已经打包好了,同理,把打包好的所需要的项目文件放到github托管的服务器上也可以运行,更多命令可查看package.json文件的script中的内容:使用npm run xxx 即可 如:npm run copy ,npm run dist等)
步骤二、【必需步骤】
运行git命令:① git add dist ② git commit -m "change publicPath" ③ git subtree push --prefix=dist origin gh-pages
(【可选步骤】查看结果:路径是(https://用户名.github.io/仓库名) 如: https://ghcdg.github.io/gallery-by-react)
步骤三、【可选步骤】启动服务器运行项目时配置文件使用的是绝对路径,所以如果需要在本地启动服务器运行项目(即使用localhost:8000访问项目)把上面的路径该回来后 重新使用:npm run dist 命令打包 然后使用 npm start 运行服务器 输入localhost:8000即可访问项目
(【可选步骤】如果还想把项目上传github 则在运行完上述步骤后使用git命令上传项目:
1、若要上传未修改路径后的项目,运行完步骤一、步骤二后,运行步骤三,然后使用以下命令上传项目(这样,当把github上的项目下载下来后,需要在本课程的环境中,用npm start 命令打开服务器运行项目预览效果,不能直接点解index.html文件查看效果)
2、若要上传修改路径后的项目,运行完步骤一、步骤二后,使用以下命令上传项目(这样,当把github上的项目下载下来后,可直接点解index.html文件查看效果,但不能直接在本课程的环境中,用npm start 命令打开服务器运行项目预览效果,二是需要运行完步骤一后才行)
① git add -A ② git commit -m "push project" ③ git push )