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

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

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

vue打包部署詳細步驟

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

我這里用的可視化工具是xftp，我這里部署了兩個項目分別是v3和hashTest項目。

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

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

一、hash模式下的打包

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

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

如圖所示：

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

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

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

找到后打開，默認是這個

修改的時候，只需要再添加一個localtion，訪問頁面即可

  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、在服務器上的目錄配置

我是存放到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;防止頁面404，至于為啥會出現(xiàn)404，是因為咱們在瀏覽器上輸入http://xxx/historyTest/about的時候是請求的服務器，而這個路由屬于后端路由，about是存在服務器上的，改成history后，就只能訪問到historyTest下的html,訪問不到about，所以會爆404，具體的解釋，自行了解。

然后重啟訪問就可以看到頁面了。

重啟nginx