将Vue项目打包成一个HTML文件后是如此丝滑

本文主要是介绍将Vue项目打包成一个HTML文件后是如此丝滑，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

最近碰到一个需求，需要将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文件后是如此丝滑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！