美文网首页web全栈linux部署
nginx部署vue项目,使用域名二级目录

nginx部署vue项目,使用域名二级目录

作者: 忘川之曼殊沙华 | 来源:发表于2021-05-06 17:05 被阅读0次

    首先,配置vue项目打包路径

    1. vue.config.js

    module.exports = { 
    // 配置正式环境的路径为 您的二级目录
    publicPath: process.env.NODE_ENV === 'production' ? '/admin' : '/',
    }
    

    2. 配置vue-router

    export default new Router({
      mode: 'history', // 去掉url中的#
      base: '/admin', // 添加base属性,值为您的二级目录
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRoutes //  此处为路由列表
    })
    

    3. run build 打包

    4. 配置nginx代理 nginx.conf

        server {
            listen 800;
            server_name localhost;
    
            location / {
                root E:/dist/OA;# 代理根目录 需要使用关键字 root
                index index.html index.htm;
                # 解决页面刷新404问题
                try_files $uri $uri/ /index.html;
            }
    
            location /admin {
                alias E:/dist/OA; # 代理二级目录 需要使用关键字 alias
                index index.html index.htm;
                # 解决页面刷新404问题
                try_files $uri $uri/ /index.html;
            }
    }
    

    相关文章

      网友评论

        本文标题:nginx部署vue项目,使用域名二级目录

        本文链接:https://www.haomeiwen.com/subject/rnuddltx.html