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