vue.config.js基本配置

const webpack = require("webpack");
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const isPro = process.env.NODE_ENV === "production" ? true : false;

module.exports = {
  publicPath: "/", // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: "dist", // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  assetsDir: "", // 放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: "index.html", // 指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  pages: {
    // pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {
      // 除了 entry 之外都是可选的
      entry: "src/main.js", // page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: "public/index.html", // 模板来源
      filename: "index.html", // 在 dist/index.html 的输出
      title: "vue-cli4-demo", // 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ["chunk-vendors", "chunk-common", "index"], // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
  },
  lintOnSave: true, // 是否在保存的时候检查
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  css: {
    extract: isPro, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps
    requireModuleExtension: true, // 启用 CSS modules for all css / pre-processor files.
    loaderOptions: {
      scss: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        prependData: `@import '@/assets/sass/index.scss';`,
      },
    }, // css预设器配置项
  },
  devServer: {
    // 环境配置
    host: "localhost",
    port: 8080,
    https: false,
    hotOnly: false,
    open: false, // 配置自动启动浏览器
    clientLogLevel: "warning",
    proxy: {
      // 配置多个代理(配置一个 proxy: 'http://localhost:4000')
      "/api": {
        target: "https://htadmin.hanhaidata.com/api/v1",
        ws: true,
        secure: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "", // 这里理解成用‘/api’代替target里面的地址，后面组件中我们调接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        },
      },
    },
  },
  pluginOptions: {
    // 第三方插件配置
    // ...
  },
  //引入jquery
  // chainWebpack: config => {
  //   config.plugin('provide').use(webpack.ProvidePlugin, [{
  //     $: 'jquery',
  //     jquery: 'jquery',
  //     jQuery: 'jquery',
  //     'window.jQuery': 'jquery'
  //   }])
  // },
  configureWebpack: {
    plugins: [
      // new UglifyJsPlugin({
      //   uglifyOptions: {
      //     compress: {
      //       warnings: false,
      //       drop_debugger: true, // 打包去除 debugger
      //       drop_console: true // 打包去除 console
      //     }
      //   },
      //   parallel: true
      // }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      }),
    ],
  },
};