vue.config.js

// 这是一个可选的配置文件,会被@vue/cli-service自动加载.
const path = require("path");
 function resolve(dir){
     return path.join(__dirname,"./",dir);
 }
 const name = require("./public/serverConfig.json").title || "web前端通用平台";
 module.exports = {

     /**
      * @type {string}
      * @default '/'
      * @description 部署应用包时的基本URL ,用法和 webpack 本身的 output.publicPath 一致
      * @description 默认情况下,应用是被部署在域名的根路径上,如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径. 例如,你的应用
      * @description 这个值也可以被设置成空字符串('')或者相对路径('./'),这样所有的资源都会被连接为相对路径,这样打出来的包可以被部署在任意路径
      * @description 相对路径的 baseUrl 有一些使用上的限制. 在以下情况下,应当避免使用baseUrl :
      */
     publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
     /**
      * @type {string}
      * @default 'dist'
      * @description 当运行vue-cli-service build 时生成的生产环境构建文件的目录.
      * @description 注意目标目录在构建之前会被清除(构建时传入 --no-clean 可关闭该行为).
      * @description 请始终使用 outputDir 而不要修改 webpack 的 output.path
      */
     outputDir : "dist",
     /**
      * @type {string}
      * @default ''
      * @description 放置生成的静态资源(js , css , img , fonts) 的 (相对于outputDir 的)目录
      * @description 从生成的资源复写 filename 或 chunkFilename 时,assetsDir 会被忽略
      */
     assetsDir : "static",
     /**
      * @type {string}
      * @default 'index.html'
      * @description 指定生成的 index.html 的输出路径 (相对于 outputDir). 也可以是绝对路径
      */
     indexPath :'index.html',
     /**
      * @type {Boolean}
      * @default true
      * @description 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存. 然而这也要求 index 的 html 是被vue cli 自动
      */
     filenameHashing : true,
     /**
      * @type {Object}
      * @default undefined
      * @description 在multi-page 模式下构建应用
      */
     pages:undefined,
     /**
      * @type {Boolean | 'error'}
      * @default true
      * @description 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码. 这个值会在@vue/cli-plugin-eslint被安装之后生效
      */
     lintOnSave:false, // process.env.NODE_ENV === "production" ? "./" : "/",
     /**
      * @type boolean
      * @default false
      * @description 是否使用包含运行时编译器的 Vue 构建版本.设置为 true 后你就可以在vue 组件中使用 template 选项了
      */
     runtimeCompiler: false,
     transpileDependencies:["ve-framework","resize-detector"],
     /**
      * @type boolean
      * @default true
      * @description 如果你不需要生产环境的source map, 可以将其设置为 false 已竞速生产环境构建
      */
     productionSourceMap : false,
     /**
      * @type string
      * @default undefined
      * @description 设置生成的 html 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin属性
      * @description 需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模板(public/index.html)中的标签不受影响
      */
     crossorigin:undefined,
     /**
      * @type boolean
      * @default false
      * @description
      */
     integrity:false,
     /**
      * @type Object | function
      * @description 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中
      * @description 如果这个值是一个函数,则会接收被解析的配置作为参数.该函数可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置
      */
     configureWebpack :{
         name : name,
         devtool:"source-map",
         // 解决日历报错问题
         resolve:{
            alias:{
                "vue$":"vue/dist/vue.esm.js"
            }
         },
         optimization:{
             splitChunks:{
                 cacheGroups:{
                     element:{
                         test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                         name:"element",
                         chunks:"all" // 这里的 chunks 的值不能用 async ,否则element 不会被单独打包
                     }
                 }
             }
         },
         /**
          * @type function
          * @default
          * @description 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例.允许对内部的 webpack 配置进行更细粒度的修改.
          */
         chainWebpack: config =>{
             const path = resolve("src/views/monitor");
             config.module.rule("vue").exclude.add(path);
         },
         css:{
             /**
              * @type boolean
              * @default false
              * @description 默认情况下,只有 *.module.[ext] 结尾的文件才会被视作 css modules 模块.设置为 true 后 你就可以去掉文件名中的 .module
              */
             modules:false,
             /**
              * @type boolean
              * @default false
              * @description 是否为 css 开启 source map . 设置为 true 之后可能会影响构建的性能
              */
             sourceMap:false,
             /**
              * @type Object
              * @default {}
              * @description 向css相关的loader 传递选项
              * @description 相比于使用 chainWebpack 手动指定 loader 更推荐上面这样做,因为这些选项需要用用在使用了相应的loader的多个地方
              */
             loaderOptions:{},
         },
         /**
          * @type Object
          * @description 所有 webpack-dev-server 的选项都支持,注意
          * @description 有些值像 host / port 和 https 可能会被命令行参数覆写
          * @description 有些值像 publicPath 和 historyApiFallback 不应该被修改,因为他们需要和开发服务器的baseUrl 同步以保障正常的工作
          */
         devServer: {
             overlay:{
                 warning:false,
                 error:false
             },
             // host:"localhost",
             // port:8080,
             https:false,
             open:false,
             /**
              * @type string | Object
              * @description 如果你的前端应用和后端api 服务器没有运行在同一个主机上,你需要在开发环境将api请求代理到api服务器.这个问题可以通过
              * @description devServer.proxy 可以是一个指向开环境api 服务器的字符串,例如  proxy:'localhost:4000'
              * @description 如果你想要更多的代理控制行为,也可以使用一个path:options 成对的对象.完整的选项可以查阅 http-proxy-middleware
              */
             proxy:{
                 "/template":{
                     target:"http://192.168.245.203:10001",
                     changeOrigin: true,
                     pathRewrite:{
                         "^/template":""
                     }
                 },
                 "/sx-websocket":{
                     ws:true,
                     target:"http://192.168.245.203:10001"
                     changeOrigin:true,
                     pathRewrite:{
                         "^/sx-websocket":""
                     }
                 }
             }
         }
     },
     /**
      * @type Object
      * @description 这个是一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项
      */
     pluginOptions:{}

 }