Vue history模式下配置相对路径

公司需要我们的项目是可以随意部署的，域名或ip可以随时改变，不需要每次还需要改代码打包部署，所以做以下修改，以满足公司需要。

基础

build目录下是和webpack相关的配置，config下是和项目相关的配置。

配置文件修改

config/index.js文件

文件中是开发和构建两种环境下的配置。

build文件夹下也有文件引入了这个index.js中的配置。

assetsRoot：项目文件的存放路径。

assetsPublictPath：发布路径。如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器，可以在这里进行设置，设置之后构建的产品文件在注入到index.html中的时候就会带上这里的发布路径。

assetsSubDirectory：存放静态资源文件的目录，位于dist文件夹（assetsRoot配置的目录）下。

config/index

build/utils.js

修改样式引用的资源文件（包括图片，视频，字体文件等）的路径为相对路径。

在ExtractTextPlugin配置中，添加或修改publicPath路径为'../../'。

build/utils

router/index.js

base，官方的定义是应用的基路径。如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

assetsPublicPath的配置，需要在路由中使用，由于要求不知道配置什么内容，文件夹会有几层，所以在roter/index.js中动态获取。获取pathname，然后获取相对路径，值赋值给base即可。

示例中getAbsolutePath方法这么写的原因是如果路径中误输入，多了一个/，防止找不到文件，做了一步处理。其他需要这个路径的地方，也已同样的方式获取即可。

router/index

前端做的更改前面已经说完，在需要部署的时候，Nginx也要做一些变更，可以看官方文档说明进行配置。

参考链接：

webpack再入门

vue-cli的webpack模板项目配置文件分析