vue-cli2和3中的config
最近在网上找了个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的更多相关文章
- Vue cli2.0 项目中使用Monaco Editor编辑器
monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...
- vue 单页应用中微信支付的坑
vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...
- vue/cli2.0优化
vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...
- [Vue CLI 3] 插件开发中的 genCacheConfig 细节研究
在 @vue/cli-plugin-babel/index.js 中: api.genCacheConfig('babel-loader', {}, []) 我们看一下 api.genCacheCon ...
- 在.net中读写config文件的各种方法
阅读目录 开始 config文件 - 自定义配置节点 config文件 - Property config文件 - Element config文件 - CDATA config文件 - Collec ...
- avalon 中require.config源码分析
/********************************************************************* * 配置系统 在系统运行的开始就需要读取系统中requir ...
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
- Asp.net中web.config配置文件详解(一)
本文摘自Asp.net中web.config配置文件详解 web.config是一个XML文件,用来储存Asp.NET Web应用程序的配置信息,包括数据库连接字符.身份安全验证等,可以出现在Asp. ...
随机推荐
- Nginx——请求head被过滤
前言 nginx代理服务器,app发出的请求头被直接过滤了,当时想到nginx会自动过滤掉带有_的请求头信息,所以直接改了Nginx的配置当然也可以将app的request中header中的_改为- ...
- 玩转jmeter:beanshell必备技能
beanshell是什么 BeanShell是一个小型嵌入式Java源代码解释器,具有对象脚本语言特性,能够动态地执行标准JAVA语法,并利用在JavaScript和Perl中常见的的松散类型.命令. ...
- 05-C#笔记-基本变量
1. 不支持括号初始化: 2. 支持强制类型转化: 3.运算规则同C++ 参考: http://www.runoob.com/csharp/csharp-variables.html
- BEST FREE UNITY ASSETS – OVER 200 CURATED QUALITY ASSETS
http://www.procedural-worlds.com/blog/best-free-unity-assets-categorised-mega-list/ BEST FREE UNITY ...
- serverless 如何调试(三)
在上篇文章中,我们讲解了如何调用我们的hello-world应用,只需要使用命令: serverless invoke -f hello -l ,但是我们总不可能修改一次代码,就调用一下这个命令吧,或 ...
- Tinkoff Internship Warmup Round 2018 and Codeforces Round #475 (Div. 1)
A. Alternating Sum 就是个等比数列,特判公比为 $1$ 的情况即可. #include <bits/stdc++.h> using namespace std; ; ; ...
- 关于selectpicker的多选问题
刚开始拿到这个需要求的时候,我时很没有头绪的,再前期做的时候是将这个多选的作为一个数组,传入到后端,然后再插入数据库中,然后根据关系表查询,因为但是考虑显示的问题,不知道怎么将多选的数据显示出来,我就 ...
- ISE 14.7安装教程最新版(Win10安装)
一.下载 第一步下载首先自己下载好四个压缩包,把第一个解压,其余的三个不用解压,然后去第一个解压后的文件夹打开启动程序. 第二步是点击启动程序后会有以下界面 next到下一个界面,这个时候需要把之前没 ...
- 不刷新网页修改url链接:history.pushState()和history.replaceState()新增、修改历史记录用法介绍
最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,考虑到可以通过history.pushState()解决.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使用方法前首先需要了解它 ...
- [技术博客]微信小程序审核的注意事项及企业版小程序的申请流程
关于小程序审核及企业版小程序申请的一些问题 微信小程序是一个非常方便的平台.由于微信小程序可以通过微信直接进入,不需要下载,且可使用微信账号直接登录,因此具有巨大的流量优势.但是,也正是因为微信流量巨 ...