【Vue】---Vue.config常用配置项
一、前言
Vue-cli3 搭建的项目 相比较Vue-cli2界面相对较为简洁,之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配呢?
二、基本配置
只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录)
const path = require('path') module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist', // 输出文件目录
lintOnSave: false, // eslint-loader 是否在保存的时候检查
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// webpack配置
chainWebpack: (config) => {
},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
} else {
// 为开发环境修改配置...
config.mode = 'development'
}
Object.assign(config, {
// 开发生产共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components'),
'@p': path.resolve(__dirname, './src/pages')
} // 别名配置
}
})
},
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// css相关配置
css: {
extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {
css: {}, // 这里的选项会传递给 css-loader
postcss: {} // 这里的选项会传递给 postcss-loader
}, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
modules: false // 启用 CSS modules for all css / pre-processor files.
},
parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0', // 允许外部ip访问
port: 8022, // 端口
https: false, // 启用https
overlay: {
warnings: true,
errors: true
}, // 错误、警告在页面弹出
proxy: {
'/api': {
target: 'http://www.baidu.com/api',
changeOrigin: true, // 允许websockets跨域
// ws: true,
pathRewrite: {
'^/api': ''
}
}
} // 代理转发配置,用于调试环境
},
// 第三方插件配置
pluginOptions: {}
}
【Vue】---Vue.config常用配置项的更多相关文章
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- vue封装一些常用组件loading、switch、progress
vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loadi ...
- Vue专题-js常用指令
vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...
- vue总结07 常用插件
插件 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 添加全局方法或者属性,如: vue-custom-element 添加全局资源:指令/过滤器/过渡等,如 v ...
- Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递
[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...
- vue - Vue脚手架
今天的内容vue脚手架,越来越有内味了,也慢慢地开始有点难度了哈哈,但是没有关系,慢慢学慢慢琢磨,我倒是感觉有点越来越像node了,不知道怎么回事,这是要向后端发展的节奏啊 一.初始化Vue脚手架 1 ...
随机推荐
- Red Gate .NET Reflector
Debug and decompile inside Visual Studio (VSPro edition) Use the Visual Studio debugger Use your reg ...
- GET和POST的数据传递到底有何区别?
1. GET和POST与数据如何传递没有关系 GET和POST是由HTTP协议定义的.在HTTP协议中,Method和Data(URL, Body, Header)是正交的两个概念,也就是说,使用哪个 ...
- Mutable and Immutable Variables in Python
本文解决python中比较令人困惑的一个小问题:传递到函数中的参数若在函数中进行了重新赋值,对于函数外的原变量有何影响.看一个小栗子: def fun(a): a=2 return a=1 fun(a ...
- FVWM使用指南
www.ctex.org/documents/shredder/fvwm_frame.html
- 重定向和转向的写法,重定向以post方式提交
重转向保留跳转过来的Referer,路径不会变1 request.getRequestDispatcher("/eventweb/index.sp?loginId=" + logi ...
- 一、python基础之字符串的处理
最近开始重新回过头来巩固一下python的基础知识,并在此做一些记录以便未来更好的回顾 一.字符串的大小写转换 title() 使用title()方法可以将字符串中每个单词的首字母大写 name = ...
- 44-python基础-python3-字符串-常用字符串方法(二)-isalpha()-isalnum()-isdigit()-isspace()-istitle()
3-isX 字符串方法 序号 方法 条件 返回结果1 返回结果2 1 isalpha() 如果字符串只包含字母,并且非空; True False 2 isalnum() 如果字符串只包含字母和数字 ...
- 不要62(数位dp)
题目传送门 不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 第五节 RabbitMQ在C#端的应用-消息收发
原文:第五节 RabbitMQ在C#端的应用-消息收发 版权声明:未经本人同意,不得转载该文章,谢谢 https://blog.csdn.net/phocus1/article/details/873 ...
- html/js部分问题和小结
2015/9/8 1.js中不要试图去处理由[变量:变量]组成的map(不过可以通过DWR.addOptions添加),而是处理[bh:变量][xm:变量],然后通过data[i].bh,data[i ...