解决webpack打包后根目录下有子文件夹的路径不匹配

问题描述：项目打包后发布上线，不是放在服务器的根目录下，而是放在根目录的子文件夹下，这个时候项目的html中有手动引入的link/script的src和href文件。打包后对于这些文件不能正确的拼接子文件夹为路径解决办法：1、如果项目是采用的vue-cli3的webpack打包的在vue.config.js中增加publicPath配置项，这个publicPath配置项中写入我要拼接的子文件...

米兰小铁匠1990

2736人浏览 · 2019-06-22 14:01:31

米兰小铁匠1990 · 2019-06-22 14:01:31 发布

问题描述：项目打包后发布上线，不是放在服务器的根目录下，而是放在根目录的子文件夹下，这个时候项目的html中有手动引入的link/script的src和href文件。打包后对于这些文件不能正确的拼接子文件夹为路径
先附上一张html页面样例供大家看一下
现在的引用地址我本地起服务访问没问题，但是发布到线上之后是要在一个子文件夹下面的，假设这个子文件夹是dist，就需要打包后生成的文件给我拼接上dist
解决办法：
1、如果项目是采用的vue-cli3的webpack打包的
在vue.config.js中增加publicPath配置项，这个publicPath配置项中写入我要拼接的子文件夹名，采用/renter-web/这种方式，打包后即可拼接上子文件夹名作为正确路径
2、如果项目是采用webpack打包的
在webpack.prod.conf.js中做如下更改：
在这里插入图片描述

webpack打包的时候顺序: npm run build => build.js(在这个文件夹中指定了环境状态为priduction,语句为：process.env.NODE_ENV = ‘production’) => webpack.prod.conf.js (上述文件都是在build文件夹中的，在这个文件中引入了config文件夹中的index.js。config的文件夹中有三大环境的js文件和总的入口文件，也就是index.js。在index.js中配置了dev环境和build环境的路径配置，我们走build里面的配置)
然后在webpack.prod.conf.js中的HtmlWebpackPlugin的实例化中加入上述配置
最后在html中使用模板语言，加上这部分配置，如下图
在这里插入图片描述

目前commonUrl是自己起的名字，暂时按照这个名字

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^