nginx部署history模式的vue3项目

1. 选择history模式路由

在创建项目时选择history模式，或者在路由文件里面修改成history模式

// process.env.VUE_APP_BASE_URL为部署的文件夹路径
const router = createRouter({
  history: createWebHistory(process.env.VUE_APP_BASE_URL),
  routes,
});

2. 设置环境变量

在根目录新建.env.development文件和.env.production文件。在环境变量文件里面设置的变量最好以VUE_APP_开头，以下为官网原话.

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

// .env.development文件
VUE_APP_BASE_URL=/wlhao/vue3app

// .env.production文件
VUE_APP_BASE_URL=/wlhao/vue3app

3. 修改publicPath和路由的base一致

// vue.config.js
module.exports = {
  publicPath: '/wlhao/vue3app',
  outputDir: 'vue3app' // 打包后生成的文件夹名称
};

上述两项都修改好了之后，重新运行项目，控制台出现的地址也会发生变化

4. 进行nginx配置

打包之后生成了vue3app文件夹，把打包好的文件夹放入nginx下的目录当中，这里是放在了nginx/html/wlhao下面。

然后进入nginx/conf目录下，修改nginx.conf文件，之后需要重启nginx服务。

# 在server里面添加

location /wlhao/vue3app 
{
    root /www/server/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /wlhao/vue3app/index.html;
}

5. 访问线上地址验证

访问http://服务器IP地址/wlhao/vue3app/就能正常看到项目页面了