Vue-cli3项目配置Vue.config.js实战记录

Vue-cli3 搭建的项目 界面想对之前较为简洁

之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js
文件（是根目录，不是src目录

语法

module.exports = {
 // 基本路径
 baseUrl: '/',
 // 输出文件目录
 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',
 port: 8080,
 https: false,
 hotOnly: false,
 proxy: null, // 设置代理
 before: app => {}
 },
 // 第三方插件配置
 pluginOptions: {
 // ...
 }
}

举例

上图内容做了两块内容，经测试没有问题

1.将启动端口设置为 8080

2.设置路径别名

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • vue新vue-cli3环境配置和模拟json数据的实例

    最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同: 1.安装步骤以前是 npm install vue-cli -g 现在是: npm install -g @vue/cli 2.vue-cli2 新建项目 vue init webpack Vue-Project vuecli3新建项目,在你创建后会有一个保存当前配置的功能 vue create <project-name> vue-c

  • vue-cli脚手架build目录下utils.js工具配置文件详解

    此文章用来解释vue-cli脚手架build目录中的utils.js配置文件 1.此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader 2.关于注释 •当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // 引入nodejs路径模块 var path = require('path') // 引入config目录下的index.js配置文件 var config = requir

  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法

    问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题. 解决方案 像vue.axios.element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中. 1.在项目根目录index.html使用cdn节点导入 <div id="app"></div> <!-- 先引入 Vue --> <!--开发

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • 详解在vue-cli项目下简单使用mockjs模拟数据

    为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数据来进行后端接口模拟. 看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用. 首先搭建一个vue项目 不介绍了 安装mockjs npm install mockjs --save-dev 启动项目 npm run dev 创建mock.js文件 在s

  • 在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

    在 https://www.jb51.net/article/151520.htm这篇文章中,我们介绍了在 Angular-CLI 中引入 simple-mock 的方法. 本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤. 本质上这里介绍的是在 webpack-dev-server 中配置 simple-mock 实现 API Mock,所以适用于任何采用 webpack 的前端项目. 1 simple-mock 简介 simple-mock 是一个引入

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

  • 详解vue-cli本地环境API代理设置和解决跨域

    详解vue-cli本地环境API代理设置和解决跨域

    前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de

  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本 开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in

  • vue.js的vue-cli脚手架中使用百度地图API的实例

    vue.js的vue-cli脚手架中使用百度地图API的实例

    第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用) 2.密钥申请成功后 第二步,在项目的需要模板中引入,具体如下: 项目路径 其中index.html存放地图链接,代码如下 在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看 选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j

随机推荐