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