文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3.0 vue.config.js文件常用配置方法是什么

2023-07-05 14:09

关注

这篇文章主要介绍“vue3.0 vue.config.js文件常用配置方法是什么”,在日常操作中,相信很多人在vue3.0 vue.config.js文件常用配置方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3.0 vue.config.js文件常用配置方法是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

vue3.0 vue.config.js文件常用配置

在Vue 3.0中,与2.0版本相比有一定的差别,最明显的就是缺少了build、config文件夹,而在3.0中,关于项目的配置修改及webpack的修改,需要手动创建一个新的文件:vue.config.js。因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成。

所以这里记录一下,3.0版本中常用的配置项:

// vue.config.js const path = require("path");const resolve = dir => path.join(__dirname, dir);// const UglifyJsPlugin = require("uglifyjs-webpack-plugin");const webpack = require("webpack"); module.exports = {  // 项目部署的基本路径,默认假设你的应用将会部署在域名的根部,比如,https://www.vue-cli.com/  // 如果你的应用是部署在一个子路径下,那么你需要在这里指定子路径,比如,  // 如果你部署在 https://www.my-vue.com/my-app/; 那么将这个值改为 “/my-app/”  publicPath: "/",   // 将构建好的文件输出到哪里 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。  // 注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。  outputDir: "dist",   // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。  assetsDir: "static",   // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。  indexPath: 'index.html',   // 默认在生成的静态资源文件名中包含hash以控制缓存  filenameHashing: true,   // 是否在开发环境下通过eslint-loader在每次保存时lint代码。这个值会在@vue/cli-plugin-eslint 被安装之后生效。  // 设置为 true 时, eslint-loader 会将 lint 错误输出为编译警告。默认情况下,   // 警告仅仅会被输出到命令行,且不会使得编译失败。  // 如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'error'。  // 这会强制 eslint-loader 将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。  lintOnSave: true,   // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用   // template 选项了,但是这会让你的应用额外增加 10kb 左右。  runtimeCompiler: false,   // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式  // 转译一个依赖,可以在这个选项中列出来。  transpileDependencies: [],   // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。  productionSourceMap: true,   // 向 CSS 相关的 loader 传递选项  css: {    // 当为true时,css文件名可省略 module 默认为 false    modules: false,    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS    // 默认生产环境下是 true,开发环境下是 false    extract: false,    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能    sourceMap: false,        loaderOptions: {      sass: {        prependData: `@import "@/assets/scss/_variable.scss";`,// 预设全局css变量      },      css: {        // 这里的选项会传递给 css-loader      },      postcss: {        // 这里的选项会传递给 postcss-loader      }    },  },   // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的   // webpack 配置进行更细粒度的修改。  chainWebpack: config => {    // 添加别名    config.resolve.alias      .set("@", resolve("src"))      .set("assets", resolve("src/assets"))      .set("components", resolve("src/components"))      .set("utils", resolve("src/utils"))      .set("api", resolve("src/api"));  },   // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于  //一个内核时自动启用,仅作用于生产构建。  parallel: require("os").cpus().length > 1,   // 向 PWA 插件传递选项。  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa  pwa: {},   // 所有 webpack-dev-server 的选项都支持。  // 注意:有些值像 host、port 和 https 可能会被命令行参数覆写。  // 有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。  // 本地服务配置  devServer: {    host: "0.0.0.0",    port: 8080, // 端口号    https: false, // https:{type:Boolean}    open: true //配置自动启动浏览器  open: 'Google Chrome'-默认启动谷歌     // 配置跨域代理    proxy: {    // 说明:    // 浏览器有同源策略不支持跨域,但服务器没有,通过proxy配置,将对于接口服务器的请求代理到本地服务器,    // 再由本地服务器转发到接口服务器(target目标服务器),所以设置代理后,    // 接口请求路径会变成代理服务器地址,即本地地址localhost 或者 127.0.0.1     // 配置:    // '/api'可以是任何值,表示以/api开头的请求,实际项目中所以路径以/api开头的请求都会被本地服务器转发    '/api': {      // target指想要被代理的后端接口服务器地址(目标路径)(真正请求的服务器地址)      target: 'http://192.168.6.267:8080',      // pathRewrite用以在发送请求时,重写请求路径      // 如果在实际的请求路径中你不希望出现/api,那么可以重写路径,在请求路径中去掉/api,如下所示      pathRewrite: {        // 举例:        // 如果你的接口服务地址为:http://192.168.6.267:8080,你的接口路径为/base/company/list        // 那么为了可以使用/api代理,你可以在接口路径前添加/api,如:/api/base/company/list        // 那么你的请求就会被本地服务代理到真正的接口地址,解决了跨域问题        // 但是你的请求路径就会变成:http://192.168.6.267:8080/api/base/company/list,路径中多余/api        // 那么你可以通过重写(如下方式)去掉/api        // 或者你可以选择将/api改为/base,就不需要重写路径了,具体的使用根据业务来决定        '^/api': ''      }    }  },  },   // 第三方插件选项  // 这是一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项。  pluginOptions: {}};

vue3实战-vue.config.js配置问题

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({    //基本路径    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',    //输出目录outputDir: 'dist',//指定生成的文件indexPath: 'index.html',//vue兼容ietranspileDependencies: true,//是否启用eslint验证lintOnSave: false,//开发环境配置devServer: {    //允许别人访问自己的ip地址host: '0.0.0.0',//代理配置proxy: {            '/api': {                target: 'https://192.168.x.xxx:8080/',//接口的域名                ws: true,//是否代理websockets                secure: false,//是否是https接口                changeOrigin: true,//是否跨域                pathRewrite: {//重写地址,将前缀/api转为""                '^/api': ""                }            }        }}})

到此,关于“vue3.0 vue.config.js文件常用配置方法是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯