使用webpack实现生成html时自动生成环境链接-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

需求：使用vue-cli，npm run build的时候生成index.html文件，在index.html文件中需要按需加载script和socket的链接

1、配置config/index.js

module.exports = {
  build: {
    env: require('./prod.env'), //这里依赖prod.evn.js
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  }

2、配置prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  SOCKET_SCRIPT:'http://www.xxxxx.com:8970',
  SOCKET_CONNECT:'www.xxxxx.com:8970'
}

3、配置webpack.prod.conf.js

在HtmlWebpackPlugin插件中配置socketScript和socketConnect

var env = config.build.env //这里依赖1中配置的文件
new HtmlWebpackPlugin({ //生成html的配置
      filename: config.build.index,
      template: 'index.html',
      socketScript:env.SOCKET_SCRIPT, //配置文件
      socketConnect:env.SOCKET_CONNECT,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

4、在index.html中配置自定义的路径

<%= htmlwebpackplugin.options.socketscript=""> 这个是重点


<html>
  <head>
    <meta charset="utf-8">
    <title>xxxxtitle>
    <script src= '<%= htmlWebpackPlugin.options.socketScript %>/socket.io/socket.io.js' >script>
    <script>
      var socket = io.connect('<%= htmlWebpackPlugin.options.socketConnect %>');
    script>

  head>
  <body>
    <div id="app">div>
    
  body>
html>