美文网首页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