【学习记录11】vue打包部署配置niginx

最新推荐文章于 2024-07-23 23:06:57 发布

天才和人才就差了二

最新推荐文章于 2024-07-23 23:06:57 发布

阅读量310

点赞数

本文链接：https://blog.youkuaiyun.com/wenhui6/article/details/119343231

版权

本文介绍Vue项目打包部署的文件配置，包括Vue 2和Vue 3的不同配置方式，以及Nginx服务器如何设置路径和代理访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人菜鸟一枚，下面的理解如果有误，欢迎指出来，共同学习！

一、vue打包部署的相关文件配置

前端vue2项目config\index.js文件

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../ROOT/index.html'),
    assetsRoot: path.resolve(__dirname, '../ROOT'), // 打包后的文件夹名
    assetsSubDirectory: 'static', // 打包后的二级静态资源文件夹名
    assetsPublicPath: './' // vue中引入的文件，图片，css路径
  }

前端vue3项目配置根目录vue.config.js文件

module.exports = {
  publicPath: './',  // vue中引入的文件，图片，css路径
  outputDir: 'dist', // 打包后的文件夹名
  assetsDir: 'static' // 打包后的二级静态资源文件夹名
}

niginx的server配置

server {
    listen       8040;
    server_name  localhost; // 服务器地址
    index  index.html index.htm; // 默认读取的文件
    location  /fwdt {  // ①
        alias  D:/wenhui/testexchange/admin/ROOT; // 配置VUE打包后对应的文件夹地址
    }
}

配置好以后，访问的路径就是：http://localhost:8040/fwdt

如果想要访问路径是http://localhost:8040，那么就把上面①中的/fwdt改成/

二、niginx设置带路径并且代理的方式访问

也就是说：

访问地址是http://localhost:8030/abc/，

其实访问的是另一台服务的地址http://localhost:8040/abc/

niginx的server配置

server {
    listen       8030;
    server_name  localhost;
    index  index.html index.htm;


    location  /abc/ {
        proxy_pass http://localhost:8040;

    }

}
server {
    listen       8040;
    server_name  localhost;
    index  index.html index.htm;


    location  /abc{
    alias  D:/wenhui/admin/dist;

    }

}

在网上又搜到一篇文章感觉写的挺好的，有兴趣的可以去看看点击此处飞过去。。。