web全栈linux部署

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

2021-05-06  本文已影响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;
        }
}
上一篇下一篇

猜你喜欢

热点阅读