IT博客汇 | nginx部署vue前端

nginx部署vue前端

John Doe发表于 2023-08-23 02:17:42

nginx部署vue前端,增加项目访问前缀

通常我们nginx部署前端只需要默认的端口访问如: http://127.0.0.1:8080,
但是有时候多个项目部署在一个地址上,我们需要通过前缀来区分,例如http://127.0.0.1:8080/test1, http://127.0.0.1/test2.
此时就需要非常规配置. 此处我们演示的是docker环境下的nginx配置.docker的nginx配置可以参考nginx部署 ( docker )

无项目前缀, http://127.0.0.1:8080

vue项目的vu.config.js配置, 注意publicPath

module.exports = {
    publicPath: '/',
    assetsDir: 'static',
    outputDir: 'dist',
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'))
    },
    // 开启调试
    configureWebpack: {
        // devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
        devtool: 'source-map'
    },
    devServer: {
        open: true, // 自动打开浏览器
        host: '0.0.0.0', // 对应的主机名
        port: 8080, // 端口号
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_URL,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    }
}

nginx的配置

   listen       8080;
   server_name  127.0.0.1;
index index.html index.htm;

   location / {
       # 此处为挂载目录的指定项目文件夹
       root  /usr/share/nginx/html/test;
       try_files $uri $uri/ /index.html;
       index  index.html index.htm;
   }
# 代理后端接口
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后端接口地址
proxy_pass http://127.0.0.1:9999/;
   }

有项目前缀, http://127.0.0.1:8080/test

vue项目的vu.config.js配置, 注意publicPath

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/',
    assetsDir: 'static',
    outputDir: 'dist',
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src')).set('api', resolve('service/api'))
    },
    // 开启调试
    configureWebpack: {
        // devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
        devtool: 'source-map'
    },
    devServer: {
        open: true, // 自动打开浏览器
        host: '0.0.0.0', // 对应的主机名
        port: 8080, // 端口号
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_URL,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    }
}

router/index.js配置

vue2

const router = new VueRouter({
    mode: 'history',
    base: process.env.NODE_ENV === 'production' ? '/test/' : '/',
    routes,
})

vue3

const base = process.env.NODE_ENV === 'production' ? '/test/' : '/'
const router = createRouter({
    history: createWebHashHistory(base),
    routes,
})

nginx配置

server {
    listen       8080;
    server_name  127.0.0.1;
index index.html index.htm;

     location / {
        root  html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }


    location /test {
        # 这里要用别名天写项目包路径
        alias  /usr/share/nginx/html/test/;
        # 此处是 前缀/index.html
        try_files $uri $uri/ /test/index.html;
        index  index.html index.htm;
    }

location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:9999/;
    }
 }