本文主要记录如何配置vue的打包文件配置项,使打包后的文件能够支持二级目录的访问。html
在实际的项目中,咱们一般都使用 npm run build
直接打包文件后丢到服务器上访问 打包后的文件目录是这样的: vue
访问的静态资源都是地址是这样的: node
咱们如今要放在服务器的二级目录下访问地址,那么访问的路径就应该也加上二级目录,该如何配置尼?webpack
静态文件的访问地址应该加上二级目录前缀: ios
方法:找到项目的打包配置文件index.js
,对参数assetsPublicPath
进行配置: web
解释一下:npm
assetsPublicPath
: 是webpack打包后的文件访问的静态资源路径的根路径,若是咱们想在访问的域名后加入二级目录,那么就要在这里进行配置了。process.argv
:是node的全局变量,咱们在执行npm run build
其实真实的命令行是node build/build.js
!process.argv
指的就是node命令行后的参数,argv是一个数组,第一个参数是process.execPath
,第二个参数是当前执行的js文件路径,第三个参数开始指向咱们在命名行后面加的参数了。所以咱们这样执行命令进行打包就能够了: axios
如此,node就能够获取到process.argv[2]
是hmy
了,那么静态资源的路径就能够是/hmy
了。数组
除了修改静态文件的路径,咱们还要修改接口请求地址的路径,咱们知道在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' : '/';
这样,就完成了二级目录访问的配置啦!
原文出处:https://www.cnblogs.com/webhmy/p/10150482.html