由于vue项目使用的是vue-cli脚手架,在脚手架更新到3.7.0版本后,使用vue create指令生成项目时并没有显示集成webpack的选项和生成对应配置文件,这使得webpack直接内嵌进vue项目中,我们不再需要进行繁琐的配置,可以使用默认的配置就能满足基本的开发需求,那么当我们希望扩展配置以达成一些操作时,我们应该怎么去进行webpack的相关配置呢,那就是在vue.config.js该文件下进行配置,下面展示几张例图
如上图所示,webpack的相关配置皆可以随我们自定义进行配置,回归主题,那我们的项目要如何打包成带有访问前缀URL(二级域名)的vue发布包呢,关键点便是publicPath这个属性,关于他的官方介绍是这样的:
// 项目部署的基础路径
// 我们默认假设你的应用将会部署在域名的根部,
// 如果你的应用部署在一个子路径下,那么你需要在这里
// 指定子路径。比如将你的应用部署在
//https://www.foobar.com/my-app/
// 那么将这个值改为 '/my-app/'
publicPath:'/',
进入首页路径上的域名是http://192.168.1.88:80,publicPath默认值为'/',如果我们希望进入首页路径上的域名是http://192.168.1.88:80/qianjing,则将publicPath值改为'/qianjing'即可
关于自定义打包包名,那次是我就需要用到另一个属性了,也就是outputDir这个属性了,他的默认值是'dist',当我们对项目进行npm run build时,会将项目打包成一个dist文件,那么我们不想要文件名为dist呢,将项目名作为他的打包名显然更加合理,那么我们只需将默认值'dist',改为'自定义的项目包名'即可,例如'my_App_vue'。