vue打包(hash和history)部署詳細(xì)步驟

更新時(shí)間：2024年07月05日 14:43:32 作者：WYG_王雅格

這篇文章主要介紹了vue打包(hash和history)部署詳細(xì)步驟,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue打包部署詳細(xì)步驟

能看到這的兄弟，我就認(rèn)為你們已經(jīng)有了服務(wù)器，以及服務(wù)器上裝了nginx，下面找到nginx下的html,這個(gè)是根目錄，將你打包的文件放到這里面就行了。。。

我這里用的可視化工具是xftp，我這里部署了兩個(gè)項(xiàng)目分別是v3和hashTest項(xiàng)目。

下面詳細(xì)講一下怎么打包，以及怎么寫配置文件

![](https://img-blog.csdnimg.cn/6a9e7769a73d41bf88862ce17c67d862.png

一、hash模式下的打包

1、修改vue.config.js，先想好自己是存放再那個(gè)文件夾下

如上圖所示，根目錄下我存放的是hashTest文件夾，那么 publicPath: '/hashTest/'我就設(shè)置成了 /hashTest/，之所以這么設(shè)置，是因?yàn)?，要把靜態(tài)存放到這個(gè)文件夾下，所謂靜態(tài)文件就是css,js,image等，打包的時(shí)候如果不這是publicPath就會(huì)爆找不到這些靜態(tài)文件找不到的錯(cuò)誤。

如圖所示：

			const { defineConfig } = require('@vue/cli-service')
			module.exports = defineConfig({
			  transpileDependencies: true,
			  publicPath: '/hashTest/'
			})

2、修改完，直接打包，將項(xiàng)目拉到創(chuàng)建的hashTest文件夾下：如圖

3、找到nginx.conf文件，修改器中的localtion配置

找到后打開，默認(rèn)是這個(gè)

修改的時(shí)候，只需要再添加一個(gè)localtion，訪問頁(yè)面即可

  location  /hashTest {
            root   html/;
            index  index.html index.htm;
    }

成功顯示

4、如果你只想放在根目錄html下面，可以將123省略掉，將你打包的內(nèi)容直接拉過來即可訪問

hash就到這了~

二、history模式下的打包

1、修改router.js里面的配置

const router = new VueRouter({
  mode: 'history',
  base: '/historyTest/',
  routes
})

2、修改vue.config.js里面的配置，將base和 publicPath一直即可

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/historyTest/'
})

3、在服務(wù)器上的目錄配置

我是存放到html的根目錄下面了所以如圖：

再修改ngnix.conf里面的配置

   location  /historyTest {
        root   html/;
        index  index.html index.htm;
        try_files $uri $uri/ /historyTest/index.html;
   }

try_files $uri $uri/ /historyTest/index.html;防止頁(yè)面404，至于為啥會(huì)出現(xiàn)404，是因?yàn)樵蹅冊(cè)跒g覽器上輸入http://xxx/historyTest/about的時(shí)候是請(qǐng)求的服務(wù)器，而這個(gè)路由屬于后端路由，about是存在服務(wù)器上的，改成history后，就只能訪問到historyTest下的html,訪問不到about，所以會(huì)爆404，具體的解釋，自行了解。

然后重啟訪問就可以看到頁(yè)面了。

重啟nginx