nginx部署vue3项目

由于工作安排，需要部署nginx，经过简单的摸索，总结以下经验。

vue.config.js中，publicPath属性值很关键，后续好多地方都用得到。

module.exports = defineConfig({
    publicPath: "/playground/",  
    devServer: {
        host: '127.0.0.1',
        port: 8080,
        proxy: {
          "/api": {
            target: "http://192.168.1.122:8060/", // 代理地址
            changeOrigin: true,  // 支持跨域
            pathRewrite: (path) => path.replace(/^\/api/, ""), 
            ws: false,
           },
         },
      }
})

router的index.js中用到的是history模式，脚手架默认下载好的，没改动。

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

开发完后build打包。

在官网下载nginx，解压后文件目录如下：配置完运行时，双击绿色的nginx，有个窗口一闪而过即可。

把vue打包好的dist文件复制在html文件夹内，把index.html复制一份到html文件夹内。结构目录如下图。

在conf文件夹下的nginx.conf文件配置信息，主要是server中的一些改动，如果以上配置跟我的一样的话，可以直接用如下图的代码。

配置完后运行nginx，然后在浏览器地址栏输入：localhost:8099，即可打开项目。

以上为自己摸索出来的经验，也是我第一次部署nginx项目，就以上来看，没有多大改动的地方，主要在nginx.conf的server配置中。以上代码有不足的地方，欢迎大佬指出，感谢！