标签：Vue 丝滑 HTML plugin args vue html resolve config

最近碰到一个需求，需要将Vue项目在移动端运行测试，但一般Vue项目打包后都是不止一个文件，放到移动端测试哪受得了。

先看看打包后的目录，把这个index.html发送到手机上就能独立运行整个项目

 接下来看我的vue配置文件vue.config.js：

const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    publicPath: '',    //使用相对路径
    indexPath: 'index.html',
    outputDir: 'dist',
    // assetsDir: 'static',
    productionSourceMap: false,
    chainWebpack: config => {
      config.plugin('preload').tap(args => {

          args[0].fileBlacklist.push(/\.css/, /\.js/);
          return args;
      })
      config.plugin('inline-source')
          .use(require('html-webpack-inline-source-plugin'))
      config.plugin("html").tap(args => {

          args[0].chunksSortMode = "none";
          args[0].inlineSource = '(\.css|\.js$)';
          return args;
      });
      config.resolve.alias   //添加别名
          .set('@', resolve('src'))
          .set('@assets', resolve('src/assets'))
          .set('@components', resolve('src/components'));
    }
}

大概讲解下，该配置主要用到了 preload和html-webpack-inline-source-plugin插件，前者将vue项目懒加载的代码预先加载，保证后者将项目构建的css文件、js文件内联进html文件前已完整加载。

而config.resolve.alias的配置则对应我vue项目的源码目录结构：

 最后贴上我的依赖配置作为参考：

{
  "name": "yourvueproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "module": "^1.2.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^4.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

标签：Vue,丝滑,HTML,plugin,args,vue,html,resolve,config
来源： https://blog.csdn.net/ksws0319440/article/details/120319036

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。