Vue history模式下配置相对路径

2018-09-11  本文已影响0人  溺水的鱼_fb44

公司需要我们的项目是可以随意部署的,域名或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模板项目配置文件分析

上一篇下一篇

猜你喜欢

热点阅读