公司需要我们的项目是可以随意部署的,域名或ip可以随时改变,不需要每次还需要改代码打包部署,所以做以下修改,以满足公司需要。
基础
build目录下是和webpack相关的配置,config下是和项目相关的配置。
配置文件修改
config/index.js文件
文件中是开发和构建两种环境下的配置。
build文件夹下也有文件引入了这个index.js中的配置。
assetsRoot:项目文件的存放路径。
assetsPublictPath:发布路径。如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置,设置之后构建的产品文件在注入到index.html中的时候就会带上这里的发布路径。
assetsSubDirectory:存放静态资源文件的目录,位于dist文件夹(assetsRoot配置的目录)下。
config/indexbuild/utils.js
修改样式引用的资源文件(包括图片,视频,字体文件等)的路径为相对路径。
在ExtractTextPlugin配置中,添加或修改publicPath路径为'../../'。
build/utilsrouter/index.js
base,官方的定义是应用的基路径。如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"。
assetsPublicPath的配置,需要在路由中使用,由于要求不知道配置什么内容,文件夹会有几层,所以在roter/index.js中动态获取。获取pathname,然后获取相对路径,值赋值给base即可。
示例中getAbsolutePath方法这么写的原因是如果路径中误输入,多了一个/,防止找不到文件,做了一步处理。其他需要这个路径的地方,也已同样的方式获取即可。
router/index前端做的更改前面已经说完,在需要部署的时候,Nginx也要做一些变更,可以看官方文档说明进行配置。
参考链接:
网友评论