如何修改build之后生成的文件结构和路径

时间:2022-02-26 11:33:18

因为公司项目结构的原因, 被要求要build之后的文件夹结构要修改为:

  • dist (文件夹)
    • statics (文件夹)
      • mobile (文件夹)  ---->  存放原本 build 之后存在于 static 文件夹下的文件
    • mobile.html (文件)

  并且, 所有的引入文件前面都需要一个 /PT

因为第一次自己单独负责一个vue项目的前端工作, 所以只能上网去找相关资料咯~

 以下进行一个总结 :

  1. 找到 vue 项目中的 config 文件夹中的 index.js 文件
  2. 找到如图所示的这个位置, 如果觉得找起来麻烦, 可以直接搜索哦如何修改build之后生成的文件结构和路径
  3. 这里的 index: path.resolve(__dirname, '../dist/index.html')  , 第二个参数表示的就是dist文件夹下面的html文件的生成命名了, 所以这里改成mobile.html就可以了
  4. assetsSubDirectory 这里就可以设置你需要的build之后的文件格式了, 所以我修改为 'statics/mobile'
  5. 因为项目所需, build之后的每一个文件引入路径前面都需要一个PT, 所以将 assetsPublicPath 修改为 '/PT/' 就可以啦
  6. 这样, 只要运行npm run build, 生成的文件结构就是你需要的了

  最后, 放上一张修改后的代码图

    如何修改build之后生成的文件结构和路径

  

  >>>   表达不够专业, 自己留个笔记, 也希望能对和我一样的初次负责的新手有帮助咯~   <<<