vue中开启https

const { defineConfig } = require('@vue/cli-service')
const CompressionPlugin = require('compression-webpack-plugin')
const path = require('path')
const fs = require('fs')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  publicPath: '/',
  transpileDependencies: true,
  productionSourceMap: false,
  lintOnSave: false,
  configureWebpack: {
      devtool: 'source-map'
  },
  devServer: {
   open: true,
   host: 'tst.com',
//   port: 80,
   allowedHosts: [ 'tst.com' ],
   https: {
         cert: fs.readFileSync(path.join(__dirname, 'ssl//huiwen.crt')),
         key: fs.readFileSync(path.join(__dirname, 'ssl//huiwen.key'))
   },

   proxy: {
      '^/api': {
         target: 'https://tst.com/'// dev
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }

      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(
        config.optimization.minimizer[0].options.minimizer.options.compress,
        {
          drop_console: true
        }
      )
    }
    const plugins = []
    plugins.push(
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css|\.svg/, // 匹配文件名
        threshold: 10240 // 对超过10k的数据进行压缩
      })
    )
    return {
      resolve: {
        alias: {
          '@': resolve('./src'),
          '@assets': resolve('./src/assets'),
          '@components': resolve('./src/components'),
          '@views': resolve('./src/views'),
          '@plugins': resolve('./src/plugins')
        }
      },
      output: {
        filename: 'js/[name].[contenthash:8].js'
      },
      plugins
    }
  },
  chainWebpack (config) {
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
    config.when(process.env.NODE_ENV !== 'development',
      config => {
        // source设置
        config.when(process.env.VUE_APP_ENV !== 'PRD', config =>
          config.devtool('eval-source-map')
        )
        config.when(process.env.VUE_APP_ENV === 'PRD', config =>
          config.devtool('cheap-module-source-map')
        )
      }
    )
    /* 添加分析工具 */
    // if (process.env.VUE_APP_ENV === 'DEV') {
    //   config
    //     .plugin('webpack-bundle-analyzer')
    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    //     .end()
    // }
    // 拆包
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial' // only package third parties that are initially dependent
        },
        'chunk-base': {
          name: 'chunk-base',
          test: /[\\/]node_modules[\\/](vue|vue-router|axios)/,
          chunks: 'all',
          priority: 0
        },
        lodash: {
          name: 'chunk-lodash',
          priority: 0,
          chunks: 'all',
          test: /[\\/]node_modules[\\/]lodash[\\/](.*)/
        },
        echarts: {
          name: 'chunk-echarts',
          priority: 0,
          chunks: 'all',
          test: /[\\/]node_modules[\\/]echarts[\\/](.*)/
        },
        'hi-ui': {
          name: 'chunk-hi-ui',
          priority: 1,
          chunks: 'all',
          test: /[\\/]node_modules[\\/]@hi[\\/]ui[\\/](.*)/
        },
        'hi-rich-text-editor': {
          name: 'chunk-hi-rich-text-editor',
          priority: 2,
          chunks: 'all',
          test: /[\\/]node_modules[\\/]@hi[\\/]rich-text-editor[\\/](.*)/
        }
      }
    })
  }
})

 

vue2.0中

项目工程根目录下，找到文件 vue.config.js。设置 module.exports.devServer.https: true

项目工程根目录下，找到文件 vue.config.js。设置 module.exports.devServer.https: true

module.exports = {
productionSourceMap: false,
configureWebpack: {
devtool: 'source-map'
},
// 它支持webPack-dev-server的所有选项
devServer: {
https: true, // https:{type:Boolean}
open: true, //配置自动启动浏览器
proxy: {

}
}

访问：https://localhost:8080

 

 

配置示例: