前端項(xiàng)目打包部署
通過(guò)vue-cli和webpack構(gòu)建的項(xiàng)目體積一般都較大，在生產(chǎn)環(huán)境下，需要進(jìn)行打包部署。
1.準(zhǔn)備
-
打包前，將config目錄下的index.js文件做修改，將assertsPublicPath的"/"修改為"./"
image.png
路徑修改
路由模式修改
將router下的index.js路由文件的history模式去掉
2.打包
項(xiàng)目路徑下，運(yùn)行打包命令
npm run build
build結(jié)束后的結(jié)果，項(xiàng)目路徑會(huì)出現(xiàn)一個(gè)dist目錄
image.png
進(jìn)入dist目錄
image.png
3.部署
解壓nginx到本地目錄
image.png
nginx
復(fù)制打包的dist文件夾到nginx的html目錄
image.png
4.命令行進(jìn)入nginx目錄后，運(yùn)行
start nginx
一閃而過(guò)
5.打開(kāi)瀏覽器，輸入http://localhost，可以看到nginx的首頁(yè)
image.png
6.輸入http://localhost/dist，可以看到項(xiàng)目運(yùn)行結(jié)果
image.png
