zoukankan      html  css  js  c++  java
  • vue history 模式打包部署在域名的二级目录的配置指南

      最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-routerhistory 模式。

      我们都知道vue-router 的两种前端基本访问模式 hash history hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署。

    本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置:

    1. vue-router 路由的文件的配置,根据自己部署的二级目录填写 

    1  export default new VueRouter({
    2     mode:"history",
    3     base:"/web",

     

    2.vue.config.js配置文件(如果没有新建一个,项目根目录下)

     注意: baseUrl  Vue CLI 3.3 起已弃用,请使用publicPath

    module.exports = {
      publicPath:"/web"
    }

    3.在入口文件中index.html head 标签内加入 

     <meta base ="/web/">

     

    4.最后就是部署配置,以nginx 为例   

    server {
        listen 80;
        server_name localhost;
        root /home/wwwroot/;
        location /web {
            try_files $uri $uri/ /web/index.html;
        }
    }

    到此,配置和部署已经完成了,将打包好的前端静态资源放在域名指定的根目录下的二级(多级目录配置同上)录即可,

    注意,以上配置是针对在history模式,部署在域名下的二级目录以上的 配置,hash 模式 和 history 模式部署在域名根目录不需要那么多配置

    本人测试过部署过,只要按照以上配置四个地方,完全没有问题,但是有不对之处,还请大家指出,谢谢....

  • 相关阅读:
    单片机控制蜂鸣器和弦音发音程序
    Ajax发送Post请求
    加壳学习笔记(一)-基础知识
    每日一小练——等值数目
    NTP配置实践
    由查找session IP 展开---函数、触发器、包
    单片机第13课:串口通信---向计算机发送数据
    [think in java]知识点学习
    【插件开发】—— 8 IPreferenceStore,插件的键/值存储!
    【插件开发】—— 7 SWT布局详解,不能再详细了!
  • 原文地址:https://www.cnblogs.com/beyonds/p/11117338.html
Copyright © 2011-2022 走看看