通過vue-cli和webpack構(gòu)建的項(xiàng)目體積一般都較大鲸睛，在生產(chǎn)環(huán)境下昨寞，需要進(jìn)行打包部署洛巢。
1.準(zhǔn)備
-
打包前括袒，將config目錄下的index.js文件做修改，將assertsPublicPath的"/"修改為"./"
路徑修改 - 路由模式修改
將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目錄
dist目錄文件
3.部署
-
解壓nginx到本地目錄
nginx -
復(fù)制打包的dist文件夾到nginx的html目錄
image.png 命令行進(jìn)入nginx目錄后，運(yùn)行
start nginx
一閃而過
- 打開瀏覽器狈邑，輸入http://localhost，可以看到nginx的首頁
image.png
輸入http://localhost/dist蚤认，可以看到項(xiàng)目運(yùn)行結(jié)果
運(yùn)行項(xiàng)目
