vue项目部署到二级路径nginx配以及错误的解决

2022-11-10 126点热度 0人点赞 0条评论

因为域名有限,所以想把vue项目部署在某个域名的二级路径上,例如:https://www.example.com/someapp/下

nginx的配置如下:

location ^~ /someapp {
    #proxy_read_timeout 1800;
    #proxy_connect_timeout 1800;
    #proxy_send_timeout 1800;

    try_files $uri $uri/ /index.html;

    root /var/website/;
}

在/var/website下新建someapp目录,里面放的就是vue项目打包后的html文件

部署上去后,发现无法访问,经过摸索,发现需要修改如下几个地方,记录在这里,供需要的查阅

vue.config.js 修改如下(只把涉及到的配置加上,其他省略了):

'use strict'

const path = require('path')

module.exports = {
  dev: {
    // 省略
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),//assetsRoot:打包后文件存放的路径
    assetsSubDirectory: 'static',//除了index.html之外的静态资源要存放的路径
    assetsPublicPath: '/someapp/',// 代表打包后,index.html里面引用资源的相对地址
    publicPath:''
  }
}

另外路由的配置也需要修改(增加base项的设置,如下):

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path : '/',
      redirect : '/home',
    },
    { title: '登录',
      path : '/login',
      component: () => import('@/views/user/login.vue'),
      meta: {
        keepAlive: false
      }
    }
    
  ],
  base:'/someapp/'
})

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论