vue打包(hash和history)部署详细步骤

vue打包部署详细步骤

能看到这的兄弟，我就认为你们已经有了服务器，以及服务器上装了nginx，下面找到nginx下的html,这个是根目录，将你打包的文件放到这里面就行了。。。

我这里用的可视化工具是xftp，我这里部署了两个项目分别是v3和hashTest项目。

下面详细讲一下怎么打包，以及怎么写配置文件

一、hash模式下的打包

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

如上图所示，根目录下我存放的是hashTest文件夹，那么 publicPath: '/hashTest/'我就设置成了 /hashTest/，之所以这么设置，是因为，要把静态存放到这个文件夹下，所谓静态文件就是css,js,image等，打包的时候如果不这是publicPath就会爆找不到这些静态文件找不到的错误。

如图所示：

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

2、修改完，直接打包，将项目拉到创建的hashTest文件夹下：如图

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

找到后打开，默认是这个

修改的时候，只需要再添加一个localtion，访问页面即可

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

成功显示

4、如果你只想放在根目录html下面，可以将123省略掉，将你打包的内容直接拉过来即可访问

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，至于为啥会出现404，是因为咱们在浏览器上输入http://xxx/historyTest/about的时候是请求的服务器，而这个路由属于后端路由，about是存在服务器上的，改成history后，就只能访问到historyTest下的html,访问不到about，所以会爆404，具体的解释，自行了解。

然后重启访问就可以看到页面了。

重启nginx

  ./nginx -s reload

当然你要找到nginx下的sbin，我的是在这个目录下，每次修改都要重新启动

/usr/local/nginx/sbin

重启后访问路径，没毛病。。。。。

主要就这几个了

hash模式路径：

• http://47.98.174.225/#/
• http://47.98.174.225/hashTest/#/

history模式访问路径：

• http://47.98.174.225/historyTest/about

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。