最近在网上找了个vue搭建的后台管理的框架,在使用的时候发现没有了config和build文件夹,所以当时就蒙圈了,以为是作者自己改了什么东西,所以感觉自己不知道从何下手了,不过通过查资料发现原来是vue-cli2和3的config不相同,vue-cli3更加简洁了而已,vue.config.js是自己根据自己的需求新建的文件,开始是没有的。

所以自己开始各种查资料去了解vue-cli3的vue.config.js中的配置项,最后总结下来的

  1. module.exports = {
  2. // 基本路径 baseURL已经过时
  3. publicPath: './',
  4. // 输出文件目录
  5. outputDir: 'dist',
  6. // eslint-loader 是否在保存的时候检查
  7. lintOnSave: true,
  8. // use the full build with in-browser compiler?
  9. // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  10. // compiler: false,
  11. // webpack配置
  12. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  13. chainWebpack: () => {},
  14. configureWebpack: () => {},
  15. // vue-loader 配置项
  16. // https://vue-loader.vuejs.org/en/options.html
  17. // vueLoader: {},
  18. // 生产环境是否生成 sourceMap 文件
  19. productionSourceMap: true,
  20. // css相关配置
  21. css: {
  22. // 是否使用css分离插件 ExtractTextPlugin
  23. extract: true,
  24. // 开启 CSS source maps?
  25. sourceMap: false,
  26. // css预设器配置项
  27. loaderOptions: {},
  28. // 启用 CSS modules for all css / pre-processor files.
  29. modules: false
  30. },
  31. // use thread-loader for babel & TS in production build
  32. // enabled by default if the machine has more than 1 cores
  33. parallel: require('os').cpus().length > 1,
  34. // 是否启用dll
  35. // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  36. // dll: false,
  37. // PWA 插件相关配置
  38. // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  39. pwa: {},
  40. // webpack-dev-server 相关配置
  41. devServer: {
  42. open: process.platform === 'darwin',
  43. host: '0.0.0.0',//如果是真机测试,就使用这个IP
  44. port: 1234,
  45. https: false,
  46. hotOnly: false,
  47. proxy: null, // 设置代理
  48. before: app => {}
  49. },
      pages: {
  1. index: {
  2. // page 的入口
  3. entry: 'src/index/main.js',
  4. // 模板来源
  5. template: 'public/index.html',
  6. // 在 dist/index.html 的输出
  7. filename: 'index.html',
  8. // 当使用 title 选项时,
  9. // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  10. title: 'Index Page',
  11. // 在这个页面中包含的块,默认情况下会包含
  12. // 提取出来的通用 chunk 和 vendor chunk。
  13. chunks: ['chunk-vendors', 'chunk-common', 'index']
  14. },
  15. // 当使用只有入口的字符串格式时,
  16. // 模板会被推导为 `public/subpage.html`
  17. // 并且如果找不到的话,就回退到 `public/index.html`。
  18. // 输出文件名会被推导为 `subpage.html`。
  19. subpage: 'src/subpage/main.js'
  20. }
  1. // 第三方插件配置
    pluginOptions: { // ... } }
  2. //Vue.config.js配置跨域
  3. devServer: {
  4. open: true, //浏览器自动打开页面
  5. host: "0.0.0.0", //如果是真机测试,就使用这个IP
  6. port: 8911,
  7. https: false,
  8. hotOnly: false, //热更新(webpack已实现了,这里false即可)
  9. proxy: {
  10. //配置跨域
  11. '/api': {
  12. target: "http://192.168.234.237:8886/api",
  13. ws:true,
  14. changOrigin:true,
  15. pathRewrite:{
  16. '^/api':'/'
  17. }
  18. }
  19. }
  20. }
  21. //调用
  22. this.$http.get('/api/order/getOrder')
  23. .then(res => {
  24. console.log(res.data);
  25. })
  26. .catch(err => {
  27. console.log(err.data.message);
  28. });

vue-cli2和3中的config的更多相关文章

  1. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  2. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  3. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  4. [Vue CLI 3] 插件开发中的 genCacheConfig 细节研究

    在 @vue/cli-plugin-babel/index.js 中: api.genCacheConfig('babel-loader', {}, []) 我们看一下 api.genCacheCon ...

  5. 在.net中读写config文件的各种方法

    阅读目录 开始 config文件 - 自定义配置节点 config文件 - Property config文件 - Element config文件 - CDATA config文件 - Collec ...

  6. avalon 中require.config源码分析

    /********************************************************************* * 配置系统 在系统运行的开始就需要读取系统中requir ...

  7. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  8. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  9. vue 如何在循环中绑定v-model

    vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...

  10. Asp.net中web.config配置文件详解(一)

    本文摘自Asp.net中web.config配置文件详解 web.config是一个XML文件,用来储存Asp.NET Web应用程序的配置信息,包括数据库连接字符.身份安全验证等,可以出现在Asp. ...

随机推荐

  1. 将python项目.py文件打包成.exe文件

    安装pyinstaller包 pip3 install pyinstaller 如果不行 pip3 install pyinstaller -i https://pypi.doubanio.com/s ...

  2. EasyUI前后端分离

    陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色.Vs前后端分离 美工 ...

  3. windows下socket编程实现client和server双向通信

    服务端代码server.c // server.cpp : Defines the entry point for the console application. // #include <s ...

  4. 第02组 Alpha冲刺(1/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:进行组员分工 GitHub签入记录 接下来的计划:构思游戏实现 还剩下哪些任务:敲代码 燃尽图 遇到的困难:任务分配的不及时,导致很 ...

  5. matplotlib 柱状图

    222 # coding utf-8 # import matplotlib import numpy as np import matplotlib.pyplot as plt import mat ...

  6. haproxy 配置文件详解 之 defaults

    配置示例: defaults mode http retries timeout connect 10s timeout client 20s timeout server 30s timeout c ...

  7. .net项目发布到iis

    参考: https://www.cnblogs.com/teyigou/p/8125379.html https://www.cnblogs.com/kissfu/p/6399472.html htt ...

  8. 【cf比赛记录】Educational Codeforces Round 78 (Rated for Div. 2)

    比赛传送门 A. Shuffle Hashing 题意:加密字符串.可以把字符串的字母打乱后再从前面以及后面接上字符串.问加密后的字符串是否符合加密规则. 题解:字符串的长度很短,直接暴力搜索所有情况 ...

  9. docker:轻量级图形页面管理工具Portainer

    1.介绍 docker 图形化管理提供了很多工具,有Portainer.Docker UI.Shipyard等等,本文主要介绍Portainer. Portainer是一个开源.轻量级Docker管理 ...

  10. Tarjan 算法求 LCA / Tarjan 算法求强连通分量

    [时光蒸汽喵带你做专题]最近公共祖先 LCA (Lowest Common Ancestors)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili tarjan LCA - YouTube Tarj ...