基于vue-cli4的多页面构建配置

vue.config.js

<code class="language-null">const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
var fs = require('fs');
const CopyPlugin = require('copy-webpack-plugin');
let init_path = process.env.VUE_APP_BUILD_PATH;
let relative_path = init_path;
if (!/^(\.|\/)/.test(init_path)) {
  //补齐相对路径
  relative_path = `./${init_path}`;
}
if (!/\/$/.test(init_path)) {
  //补齐目录斜线
  relative_path = `${relative_path}/`;
}
let entry_path = `${relative_path}**/*.html`;
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
  let entries = {},
    basename,
    arr,
    tmp,
    pathname,
    appname;

  glob.sync(globPath).forEach(function(entry) {
    basename = path.basename(entry, path.extname(entry));
    arr = entry.split('/');
    tmp = arr.splice(1, arr.length - 2);
    pathname = basename; // 正确输出js和html的路径
    pagename = basename + '.html';

    entries[pathname] = {
      entry: tmp.join('/') + '/' + basename + '.js',
      template: tmp.join('/') + '/' + pagename,
      title: pagename,
      filename: pagename
    };
  });
  return entries;
}

let pages = getEntry(entry_path);
let event_id = process.env.EVENT_ID;
let is_production = process.env.NODE_ENV == 'production';

//HTML文件输出路径是对的,资源文件路径是错的
let assetsDir = is_production ? `v2/${event_id}/` : `res_dev/`; 
let publicPath = is_production ? '//xxx.com/page/' : '/'

//资源文件路径是对的,HTML文件输出路径是错的

let AddAssetHtmlPluginPath = is_production ? `//xxx.com/page/` : ``;

function getMockDataCb(file){
  return function(req, res){
    let mockData = JSON.parse(fs.readFileSync(`./mock${file}`, 'utf8'));
    res.json(mockData);
  }
};

module.exports = {
  outputDir: `../htdocs/page/`,  //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  assetsDir: assetsDir, //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录; serve和build构建都会生效,所以要区分环境
  // indexPath: ``, //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  publicPath: publicPath,
  pages,
  devServer: {
    before(app){
      let mockList = glob.sync('./mock/**/*.json').map((item, index) =&gt; {
        return item.replace(/^\.\/mock/, '');
      });
      console.log(mockList)
      mockList.forEach((file, index) =&gt; {
        app.get(file, getMockDataCb(file))
      });
    }
  },
  chainWebpack: config =&gt; {
    config.resolve.alias.set('@', path.resolve(__dirname, './'));
  },
  configureWebpack: config =&gt; {
      let pluginsPro = [
      new webpack.DllReferencePlugin({
        // context: process.cwd(),
        manifest: require('../htdocs/res/vendor/lib-manifest.json')
      })
      ,new webpack.DllReferencePlugin({
        // context: process.cwd(),
        manifest: require('../htdocs/res/vendor/global-manifest.json')
      })
      ,// 将 dll 注入到 生成的 html 模板中
      // ,new HtmlWebpackPlugin()
      new AddAssetHtmlPlugin({
        // dll文件位置
        filepath: path.resolve(__dirname, '../htdocs/res/vendor/*.js'),
        // dll 引用路径
        publicPath: AddAssetHtmlPluginPath,
        // dll最终输出的目录
        outputPath: AddAssetHtmlPluginPath
      })
    ];
    let productPlugins = [
      new CopyPlugin([
        {
          // from: `../htdocs/page/v2/${event_id}/**/*`,
          from: path.resolve(__dirname, `../htdocs/page/v2/${event_id}`)+'/**/*',
          // to: `../htdocs/res/v2/${event_id}/`,
          to: path.resolve(__dirname, `../htdocs/res/v2/${event_id}`),
          force: true,
          toType: 'dir',
          transformPath(targetPath, absolutePath) {
            return targetPath.replace(`htdocs\\page\\v2\\`, '');
          }
        }
      ])
    ];

    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置
      pluginsPro = pluginsPro.concat(productPlugins);
    } else {
      // 为开发环境修改配置
    }
    config.plugins = [...config.plugins, ...pluginsPro];
  }
};
</code>

webpack.dll.conf.js

<code class="language-null">const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// dll文件存放的目录
const dllPath = '../htdocs/res/vendor';
module.exports = {
  entry: {
    lib: ['vue', 'core-js', 'axios'],
    global: ['zepto', '@/global/flexible.js', '@/global/index.js']
  },
  output: {
    path: path.resolve(__dirname, dllPath),
    filename: '[name].dll.[contenthash].js',
    library: '[name]_dll'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './')
    }
  },
  module: {
    rules: [{
      test: require.resolve('zepto'),
      loader: 'exports-loader?window.Zepto!script-loader'
    }]
  },
  plugins: [
      //清除之前的dll文件
      new CleanWebpackPlugin(),
      //设置环境变量
      new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: 'production'
          }
      }),
      //manifest.json描述动态链接库包含了哪些内容
      new webpack.DllPlugin({
          path: path.join(__dirname, dllPath, '[name]-manifest.json'),
          name: '[name]_dll',
          context: process.cwd()
      })
  ]
};
</code>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>