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

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

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

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. JDBC连接池的九种查询

    package JDBC_Demo; import java.sql.SQLException; import java.util.List; import java.util.Map; import ...

  2. Docker镜像拉取总结

    flannel docker pull quay-mirror.qiniu.com/coreos/flannel:v0.11.0-amd64 docker tag quay-mirror.qiniu. ...

  3. python windows下获取路径时有中文处理

    在windows中用os,path.abspath(__file__)时有中文路径时,默认是转成非unicode格式 这会导致,在其它模块使用该路径时,会报 utf8' codec can't dec ...

  4. centos virtualbox虚拟机无法连接外网

    各种方法都试了,不好使. 最后重启了很多次,最后一次成功了... ----详情---- 发生的原因是因为突然断电导致的异常. 先通过systemctl restart network 来启动,结果报错 ...

  5. struts2学习2

    拦截器 //拦截器:第一种创建方式 //拦截器生命周期:随项目的启动而创建,随项目关闭而销毁 public class MyInterceptor implements Interceptor { @ ...

  6. Git挽回错误的push(commit)

    若你的(zhu)队友不小心把错误的代码提交到远程仓库,特别是包含了很多删除文件指令,不要尝试使用Git的API修改,或者删除Git仓库里的某次提交记录,风险十分大,正确的做法是备份你的本地源码,然后拉 ...

  7. 提高 Visualforce 页面加载效率的小知识

    一般原则 在设计页面时,我们要将页面的功能降至最少,不要包含多余的功能和数据,以最大化提高运行效率 如果需要开发的功能可以通过 Salesforce 的标准功能实现,那么尽量使用标准功能,比如 工作流 ...

  8. OpenStack总体架构概览&OpenStack核心组件介绍

    下面个是51CTO上一位朋友发布的O版OpenStack核心组件说明,总结的非常到位,所以我就不再造轮子了.~,~ https://down.51cto.com/data/2448945 私有云 公有 ...

  9. Unchecked runtime.lastError: The message port closed before a response was received.

    这是由于某个 Chrome 扩展程序造成的. 打开 chrome://extensions/,逐一关闭排查.我这边是由于“迅雷下载支持”这个扩展引起的,将其关闭即可.

  10. shell中使用expect命令进行远程执行命令脚本

    expect是用来实现自动交互功能的工具之一,使用expect-send来实现交互过程. 注意: 1.脚本的执行方法与bash shell不一样,比如:expect example.sh 2.向一个脚 ...