本文主要记录如何配置vue的打包文件配置项,使打包后的文件可以支持二级目录的访问。

1、常规打包

在实际的项目中,我们通常都使用 npm run build 直接打包文件后丢到服务器上访问
打包后的文件目录是这样的:

访问的静态资源都是地址是这样的:

我们现在要放在服务器的二级目录下访问地址,那么访问的路径就应该也加上二级目录,该如何配置尼?

2、静态文件地址修改

静态文件的访问地址应该加上二级目录前缀:

方法:找到项目的打包配置文件index.js,对参数assetsPublicPath进行配置:

解释一下:

  • assetsPublicPath: 是webpack打包后的文件访问的静态资源路径的根路径,如果我们想在访问的域名后加入二级目录,那么就要在这里进行配置了。
  • process.argv:是node的全局变量,我们在执行npm run build 其实真实的命令行是node build/build.jsprocess.argv指的就是node命令行后的参数,argv是一个数组,第一个参数是process.execPath,第二个参数是当前执行的js文件路径,第三个参数开始指向我们在命名行后面加的参数了。

因此我们这样执行命令进行打包就可以了:

如此,node就可以获取到process.argv[2]hmy了,那么静态资源的路径就可以是/hmy了。

3、接口地址修改

除了修改静态文件的路径,我们还要修改接口请求地址的路径,我们知道在vue的业务代码中可以通过process.env来获取全局配置对象区分生产环境和开发环境,因此我们可以将相应的配置放在对应的配置文件中。

方法:找到项目的打包生产环境的配置文件prod.env.js

'use strict'
let url = (process.argv[2] && process.argv[2] == 'hmy') ? 'hmy' : '';

module.exports = {
  NODE_ENV: '"production"',
  URL: '"' + url + '"'
}

在封装axios请求的文件中:

let URL = process.env.URL;
axios.defaults.baseURL = URL === 'hmy' ? '/hmy' : '/';

这样,就完成了二级目录访问的配置啦!

修改vue的配置项支持生产环境下二级目录访问的方法的更多相关文章

  1. centos7生产环境下openssh升级

    由于生产环境ssh版本太低,导致使用安全软件扫描时提示系统处于异常不安全的状态,主要原因是ssh漏洞.推荐通过升级ssh版本修复漏洞 因为是生产环境,所以有很多问题需要注意.为了保险起见,在生产环境下 ...

  2. Mysql迁移工具在生产环境下的使用

    在产品迭代开发发布过程中,由于业务需求的增加,数据库难免会有结构调整等操作. 在每个版本发布过程中怎么控制每个版本server端程序与数据库版本保持一致,以及数 据库升级.回滚等操作. 本博文宅鸟将向 ...

  3. 四步法分析定位生产环境下MySQL上千条SQL中的问题所在

    第一步:通过以下两种方式之一来打开慢查询功能 (1)方式一:通过修改mysql的my.cnf文件 如果是5.0或5.1等版本需要增加以下选项: log-slow-queries="mysql ...

  4. 生产环境下lnmp的权限说明

    https://www.cnblogs.com/zrp2013/p/4183546.html 有关权限说明:-rwxrw-r‐-1 root root 1213 Feb 2 09:39 50.html ...

  5. VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...

  6. Python开发程序:生产环境下实时统计网站访问日志信息

    日志实时分析系统 生产环境下有需求:要每搁五分钟统计下这段时间内的网站访问量.UV.独立IP等信息,用直观的数据表格表现出来 环境描述: 网站为Nginx服务,系统每日凌晨会对日志进行分割,拷贝到其他 ...

  7. 生产环境下一定要开启mysqlbinlog

    在没有备份数据库的情况下,可以用binlog进行恢复 在生产环境下安全第一,损失一点点效率换来的安全还是值得的. http://www.cnblogs.com/zc22/archive/2013/06 ...

  8. mysql在生产环境下有大量锁表,又不允许重启的情况下的处理办法

    mysql在生产环境下有大量锁表,又不允许重启的情况下的处理办法 满头大汗的宅鸟该怎么办呢? mysql -u root -e "show processlist"|grep -i ...

  9. [原]生产环境下的nginx.conf配置文件(多虚拟主机)

    [原]生产环境下的nginx.conf配置文件(多虚拟主机) 2013-12-27阅读110 评论0 我的生产环境下的nginx.conf配置文件,做了虚拟主机设置的,大家可以根据需求更改,下载即可在 ...

随机推荐

  1. 即使用ADO.NET,也要轻量级实体映射,比Dapper和Ormlite均快

    不管出于什么原因,有时候框架人员摒弃了NH或EF,而使用原生数据库访问对象. 为了优美的编程,用上我写的轻量级映射扩展方法吧 目的:将SqlDataReader自动转换成T类型 代码如下: /// & ...

  2. Huffman Tree

    哈夫曼(Huffman)树又称最优二叉树.它是一种带权路径长度最短的树,应用非常广泛. 关于Huffman Tree会涉及到下面的一些概念: 1. 路径和路径长度路径是指在树中从一个结点到另一个结点所 ...

  3. 配置java环境 ,安装Android Studio...(ps:用eclipse也不错,但as是趋势 自己凭爱好选择)

    to:青科大可爱的学弟学妹: 配置java环境 step1:下jdk 直接打开链接即可(ps:复制链接到迅雷下载更快哦) 64位的:http://download.oracle.com/otn-pub ...

  4. cdoj 48 Cake 水题

    Cake Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/48 Descrip ...

  5. 【leetcode】Longest Substring Without Repeating Characters (middle)

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  6. xml有哪些解析技术?区别是什么?

    xml有哪些解析技术?区别是什么? Answer: 有DOM,SAX,STAX等 (1):DOM:处理大型文件时其性能下降的非常厉害.这个问题是由DOM的树结构所造成的,这种结构占用的内存较多,而且D ...

  7. 老李推荐:第5章3节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 启动脚本

    老李推荐:第5章3节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 启动脚本   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性 ...

  8. .NET遇上Docker - Docker集成Cron定时运行.NETCore(ConsoleApp)程序.md

    配置项目的Docker支持 对于VS中Docker的配置,依旧重复一些废话. 给项目添加Docker支持,VS2015可以直接使用Docker for VS插件,VS2017在安装时选择容器支持.VS ...

  9. Linear Regression with machine learning methods

    Ha, it's English time, let's spend a few minutes to learn a simple machine learning example in a sim ...

  10. OpenStack云计算之路-Mitaka 版本

    1.1 云计算简介 云计算(英语:cloud computing ),是一种基于互联网的计算方式,通过这种方式,共享的软硬件资源和信息可以按需求提供给计算机各种终端和其他设备. 云计算是继1980年代 ...