美文网首页
Vue history模式下配置相对路径

Vue history模式下配置相对路径

作者: 溺水的鱼_fb44 | 来源:发表于2018-09-11 11:29 被阅读0次

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

    相关文章

      网友评论

          本文标题:Vue history模式下配置相对路径

          本文链接:https://www.haomeiwen.com/subject/efcugxtx.html