美文网首页Vue
nginx非根目录部署vue

nginx非根目录部署vue

作者: King斌 | 来源:发表于2021-02-25 13:08 被阅读0次

    修改vue.config.js

    在第一个vue项目的vue.config.js添加publicPath: '/请求地址'

    module.exports = {
        //部署应用包时的基本 URL
        publicPath: '/请求地址',
    };
    

    在第二个vue项目的vue.config.js中添加publicPath: '/请求地址'

    module.exports = {
        //部署应用包时的基本 URL
        publicPath: '/请求地址',
    };
    

    修改router.js

    在vue-router的配置文件router.js中修改相对应的base为base: '/请求地址'

    import Vue from 'vue'
    import Router from 'vue-router'
     
    Vue.use(Router);
     
    export default new Router({
        base: '/请求地址',
    })
    

    修改nginx.conf或者其他conf

    server {
        listen       80;
        server_name  localhost;
     
      
        location /请求地址{
            alias   html/dist;
            index index.html index.htm;
            try_files $uri $uri/ /请求地址/index.html;
        }
     
    } 
    #修改路由index.js   base: config.publicPath, #加入路由前缀
    

    const config = require('../../vue.config.js') #引入包

    export default new Router({
    //mode: 'history', // 去掉url中的#
    base: config.publicPath, #加入路由前缀
    scrollBehavior: () => ({y: 0}),
    routes: constantRoutes
    })

     
    

    后台地址

    VUE_APP_BASE_API = 后台转发地址
    

    相关文章

      网友评论

        本文标题:nginx非根目录部署vue

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