本文主要记录如何配置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. Nacos: Namespace 和 Endpoint 在生产环境下的最佳实践

    随着使用 Nacos 的企业越来越多,遇到的最频繁的两个问题就是:如何在我的生产环境正确的来使用 namespace 以及 endpoint.这篇文章主要就是针对这两个问题来聊聊使用 nacos 过程 ...

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

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

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

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

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

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

随机推荐

  1. Ubuntu 16.04 LTS 安装配置 Nginx 1.10.0 Php7.0-FPM

    1. 安装Nginx,Php-7.0 ~$ sudo add-apt-repository ppa:nginx/stable ~$ sudo apt-get update ~$ sudo apt-ge ...

  2. 【转载】CMake 简介和 CMake 模板

    转载自我的博客: CMake 简介和 CMake 模板 . 如果你用 Linux 操作系统,使用 cmake 会简单很多,可以参考一个很好的教程: CMake 入门实战 | HaHack .如果你用 ...

  3. 谈谈HTTP/2对前端的影响【转载】

    原文:http://www.peep-squirrel.com/itcontent-2500617.html 随着 HTTP/2 规范的确认,以及主流浏览器(Chrome.Firefox.IE11)对 ...

  4. Linux显示USB设备

    Linux显示USB设备 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ lsusb -tv /: Bus 08.Port 1: Dev 1, Class=ro ...

  5. MySQL多数据源笔记2-Spring多数据源一主多从读写分离(手写)

    一.为什么要进行读写分离呢? 因为数据库的"写操作"操作是比较耗时的(写上万条条数据到Mysql可能要1分钟分钟).但是数据库的"读操作"却比"写操作 ...

  6. 【Android 应用开发】Activity 状态保存 OnSaveInstanceState参数解析

    作者 : 韩曙亮 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/38297083 一. 相关方法简介 1. 状态保存方法示例 p ...

  7. 在qt creator中使用imread并将图片显示到QLable中时没反应

    调试时发现Mat m = imread("")函数运行了,但是将鼠标放在m上面时,发现m是空的,但是竟然能往下运行,简直恶心,于是我在后面加上判断m.empty(),发现返回了tu ...

  8. C# Winform 中使用FTP实现软件自动更新功能

    实现思路:通过访问FTP站点,将站点中的文件下载至软件指定位置. 第一步:FTP站点中导入需要下载更新的程序文件,并添加配置文件(配置下载后文件的下载路径),如下图所示: 第二步:Winfrom程序读 ...

  9. 调用Excel宏批量处理文件

    '1.用户可以任意选择文件夹进行遍历 '2.限定遍历时仅搜索EXCEL文件(你可以改变文件类型) '这个程序要先在“引用”下选择"microsoft scripting runtime&qu ...

  10. Http协议中常用字段总结(不定时完善中)

    1.Http协议概述 关于Http协议的发展,各种资料有很多,在此不再赘述,不明白的小伙伴儿可以去搜一下,Http报文分为请求报文和相应报文,由于Http是面向文本的,因此在报文中的每一个字段都是一些 ...