首页 > 其他分享 >vue3 vue.config.js配置详解

vue3 vue.config.js配置详解

时间:2023-08-17 18:03:40浏览次数:36  
标签:插件 vue false 配置 js vue3 true css

// vue.config.js文件是用于Vue CLI项目的全局配置的

module.exports = {

  // 部署应用包时的公共路径

  publicPath: "./",

  // 生产环境构建文件的目录名(默认为dist)

  outputDir: "dist",

  // 放置生成的静态资源的目录(默认为dist/static),可以修改为public。

  assetsDir: "static",

  // 开启eslint保存检测,有效值true/false/error

  lintOnSave: true,

  // 生产环境是否生成sourceMap文件,一般情况不建议打开

  productionSourceMap: false,

  // devServer相关配置

  devServer: {

    // 访问项目的IP地址,可以设置为“0.0.0.0”来使项目外部可访问

    host: "0.0.0.0",

    // 访问项目的端口号

    port: 8080,

    // 是否开启HTTPS模式

    https: false,

    // 自动启动浏览器

    open: true,

    // 配置反向代理处理跨域请求

    proxy: {

      // 请求地址

      "/api": {

        // 目标地址

        target: "http://localhost:3000",

        // 是否开启跨域

        changeOrigin: true,

        // 重写路径

        pathRewrite: {

          "^/api": "/api",

        },

      },

    },

  },

  // webpack相关配置

  configureWebpack: {

    // 是否启动新的进程执行打包

    parallel: true,

    // 打包性能检测

    performance: {

      hints: "warning",

      // 入口起点大小,此项必须设置

      maxAssetSize: 300000,

      // 生成的文件最大限制为1024KB

      maxEntrypointSize: 5000000,

    },

    // // externals

    // externals: {

    // vue: "Vue",

    // "vue-router": "VueRouter",

    // axios: "axios",

    // lodash: "_",

    // echarts: "echarts",

    // moment: "moment",

    // },

  },

  // css相关配置

  css: {

    // 是否使用css分离插件

    extract: true,

    // 是否开启CSS source map

    sourceMap: false,

    // css预设器配置项

    loaderOptions: {

      sass: {

 @import "@/style/global.scss";,

      },

    },

    // 启用 CSS modules for all css / pre-processor files.

    requireModuleExtension: false,

  },

  // 第三方插件配置

  pluginOptions: {},

};

// 配置说明

// publicPath 部署应用包时的公共路径。例如,如果应用程序的 URL 是http://localhost:8080/my-app/,则设置publicPath选项为'/my-app/',它将确保所有在HTML中使用的URL都正确的后续资源都具有正确的基本URI。

// outputDir 生产环境构建文件的目录名(默认dist)。

// assetsDir 放置生成的静态资源(js css img)的目录(默认dist/static)

// lintOnSave 启用 lint 检查器,有效值 true/false/error/warn,在生产构建时禁用它。

// productionSourceMap 如果您不需要生产时的source map,那么将其设置为false可以加速生产构建。

// configureWebpack 可以指定一个额外的对象来将这些配置传递给Webpack合并到最终配置中。

// devServer devServer跟服务器相关的配置项,如本地端口、代理等,具体可参考vue官网文档。

// css 单独的css文件的相关配置,包括源码、生成路径等,可自定义相关配置项。

// pluginOptions 用于插件在webpack下的一些配置项。例如vue-cli-plugin-style-resources-loader 和 vue-cli-plugin-mock,该插件是在测试环境下模拟数据请求的图标插件等。

标签:插件,vue,false,配置,js,vue3,true,css
From: https://blog.51cto.com/u_16176248/7126098

相关文章

  • SpringBoot操作前端传的Geojson进行空间查询
    SpringBoot操作前端传的Geojson进行空间查询项目说明:项目技术栈:SpringBoot+MybatisPlus+postgresql先上查询SQLSELECT*FROMdemoWHEREST_Intersects(geom,ST_GeomFromGeoJSON('放geojson类型数据'));表结构Controller层packagecom.itcy.postgresql.controller;importco......
  • js前端传json,后台接收‘‘被转为quot使用replace方法替换
    前端解决方案:varjsonstr=datas.replace(newRegExp('"',"gm"),'"')正则参数说明g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。m执行多行匹配。let data=eval('('+jsonString+')');实例1:    jsonstr.replace(newRegExp('"',......
  • centos 安装nodejs
    1.下载nodejshttps://nodejs.org/en/download/如果想下载其他版本点这里:https://nodejs.org/download/release/可以选择下载到本地或者在服务器使用wget下载wgethttps://nodejs.org/download/release/latest-v20.x/node-v20.5.1-linux-x64.tar.gz1.1上传服务器至/usr/l......
  • html、css、js实现的一个简单计算器
    title:html、css、js实现的一个简单计算器date:2023-07-1721:51:46categories:CTF-Web入门description:简易计算器主要代码来自runoob的计算器示例,只是精简了一下,把在js里监听完成的清除输入区也写成了一个函数,点击按钮的时候就自动调用了。这里面是有clear函数的,导致我......
  • vue面试2
    VUE21.为什么.Vue被称为“渐进框架”?使用渐进式框架的代价很小,从而使现有项目(使用其他技术构建的项目)更容易采用并迁移到新框架。Vue.js是一个渐进式框架,因为你可以逐步将其引入现有应用,而不必从头开始重写整个程序。Vue的最基本和核心的部分涉及“视图”层,因此可以通......
  • JScript 脚本中包含别一个文件
    如何在一个Jscript脚本中包含两外的一个Jscript脚本?可以这样做:var tsvar fso = new ActiveXObject( "Scripting.FileSystemObject" );var ForReading = 1;ts = fso.OpenTextFile("c:\\Scripts\\Functions.js", ForReading);s = ts.ReadAll();eval(s);......
  • vue3 文件上传进度条组件
    index.vue文件<template><divclass="confirm-modal"><transitionname="fade"><divclass="modal-dialog"@click="clickMaskToClose?handleCancel():null"v-if="visible"@tou......
  • vue面试题1
    VUE11.那你能讲一讲MVVM吗?MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。2.简单......
  • vue中引入echarts
    1、先下载依赖包npminstallecharts-s//安装在目标项目中,如果想要全局安装就用-g2、引入2.1、全局引入main.js中importechartsfrom'echarts'Vue.prototype.$echarts=echarts//也可以用:import*asechartsfrom'echarts'2.2、局部引入component.vueimportechar......
  • vue2第一章
    1.安装两个vscode插件vetur--让.vue文件高亮和有语法提示VueVsCodesnippets--快捷写代码2.vue组件一个.vue文件就是一个组件,称为单文件组件<template><div>//这里写HTML注意:template只能有一个根节点</div></template><script>//导出一......