vue.config.js的简单介绍

vue.config.js 是一个可选的配置文件,
在项目的 (和 package.json 同级的) 根目录中存在这个文件。
默认情况没有这个文件需要我们手动去创建这个文件的哈
那么它会被 @vue/cli-service 自动加载。 module.exports={
productionSourceMap: false, //生产环境地图资源,默认为true,此时js不会生成对应的.map文件
publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
}
需要注意的点哈
publicPath中的 ./ 是争对hash路径的。/是history的
因此是相对路径打包是././。第一个./是针对hash模式的哈
打包后其实是 ./指向的。而不是 ././

baseUrl 或 publicPath 相对路径打包

从 Vue CLI 3.3 起已弃用,请使用 publicPath 。
module.exports={
productionSourceMap: false,
publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
}
这个时候生产环境的引用就是相对路径
<img alt="Vue logo" src="./assetsA/logo.png">

outputDir 打包后的输出目录

module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist', // 输出文件目录
}

assetsDir

assetsDir:设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。
如果你将 assetsDir: 'assets'的值更改为 assetsA 后。
你开发环境值这样引入的 <img alt="Vue logo" src="../assets/logo.png">
你打包后自动变会变成 <img alt="Vue logo" src="../assetsA/logo.png">
不需要手动去更改的,是不是非常的友好呢?
module.exports = {
publicPath: './', // 基本路径是相对路径
outputDir: 'dist', // 输出文件目录
assetsDir: 'assets' //默认是assetsDir的值是assets。如果我们改为assetsA。生产环境就是assetsA了
}

indexPath

indexPath:用于设定打包生成的 index.html 文件的名称
默认值 indexPath: 'index.html' module.exports={
productionSourceMap: false,
publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
outputDir: 'dist', // 输出文件目录
assetsDir: 'assetsA',//设置放置打包生成的静态资源
indexPath: 'indexdemo1.htm' //原来的index.html会变成indexdemo1.html
}

filenameHashing

打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题。
filenameHashing: true, //这个值默认为true有哈希值.在每次部署的时候,我们是希望有哈希值的哈
filenameHashing: false, //静态资源的文件没有哈希值 module.exports={
productionSourceMap: false,
publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
outputDir: 'distAhtml', // 输出文件目录
assetsDir: 'assetsA',//设置放置打包生成的静态资源
indexPath: 'indexdemo1.html',
filenameHashing: false, //不会有哈希值
}



configureWebpack 配置别名

const path = require('path');//引入path模块,在配置别名的时候需要哈
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : './', //相对路径
outputDir: 'distAhtml', // 输出文件目录
assetsDir: 'assetsA',//设置放置打包生成的静态资源
indexPath: 'indexdemo1.html',
filenameHashing: false, //打包后不会有哈希值
// 配置别名的函数
configureWebpack: (config) => {
// config为被解析的配置
Object.assign(config, {
// 开发生产共同配置,新增一些别名设置
resolve: {
// 别名配置
alias: {
'@c': path.resolve(__dirname, './src/components'),
'@v': path.resolve(__dirname, './src/views'),
// 这个你需要配置一下,否者会报错项目中使用@引入有可能会报错的哈
'@': path.resolve(__dirname, './src'),
}
}
})
}
} 在页面中如何去使用
<HelloWorld msg="Welcome to Your Vue.js App"/>
<TestCom></TestCom>
//引入的时候我们在使用别名,经过测试,开发和生成都没有问题
import HelloWorld from '@/components/HelloWorld.vue'
import TestCom from "@c/test-com.vue"
export default {
name: 'Home',
components: {
HelloWorld,
TestCom
},

productionSourceMap (生产环境地图资源)

什么是productionSourceMap?
我理解的:productionSourceMap就是生产环境地图资源,它的作用就是定位。
可以定位浏览器控制台输出语句在项目文件的哪个位置。 productionSourceMap:它的值是布尔类型的,默认值是true。
可以将其设置为 false 以加速生产环境构建。 设置productionSourceMap:true。
我们可以清楚的知道输出语句是在哪个文件的哪个位置
以及js会生成.map文件。css是不会生成.map文件的

productionSourceMap:设置为true.

设置productionSourceMap:true。
我们可以清楚的知道输出语句是在哪个文件的哪个位置.
以及js会生成.map文件。css是不会生成.map文件的



productionSourceMap:设置为false.

设置productionSourceMap:false。
我们不知道输出语句是在代码中的哪一行输出的.
以及js不会生成.map文件。
设置为 false 以加速生产环境构建



@vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap的更多相关文章

  1. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

  2. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

  3. Vue CLI 3 配置兼容IE10

    最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...

  4. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  5. [Vue CLI 3] 配置解析之 css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...

  6. Configuration Reference In Vue CLI 3.0

    Configuration Reference This project is sponsored by  #Global CLI Config Some global configurations ...

  7. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  8. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  9. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

随机推荐

  1. 访问静态资源有问题(配置url-pattern 用"/")(两种静态资源处理)

    发起的请求是由哪些服务器程序处理的 http://localhost:8080/ch05_url_pattern/index.jsp: tomcat(jsp会转为servlet) http://loc ...

  2. IoC容器-Bean管理XML方式(注入空值和特殊符号)

    Ioc操作Bean管理(xml注入其他类型属性), 字面量 (1)null值 (2)属性值包含特殊符号

  3. 一起玩转玩转LiteOS组件:TinyFrame

    摘要:TinyFrame是一个简单的用于解析串口(如 UART.telnet.套接字等)通信数据帧的库. 本文分享自华为云社区<LiteOS组件尝鲜-玩转TinyFrame>,作者:Lio ...

  4. 权限修饰符和final关键字

    public 不受任何限制,可以被其他任何类访问 一个JAVA文件只能包含一个public文件 java将public类作为每个编译单元的数据接口  只能有一个接口 private 只能在自己类中访问 ...

  5. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  6. where子句和having子句区别

    感谢大佬:https://blog.csdn.net/XiaopinOo/article/details/78305008 where子句和having子句的区别: 1.where  不能放在grou ...

  7. JScrollPane 自动跟进 自动到滚动到最底部

    感谢大佬:https://blog.csdn.net/csdn_lqr/article/details/51068423 注:以下方法为网上摘抄 1 . JTable( 放在JScrollPane中  ...

  8. 有关OPenCV的几个库函数的使用

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1) IplImage* cvCreateImage( CvSize size, int depth, int chan ...

  9. getter/setter方法

    1.setter方法 作用:用来设置成员变量,可以在方法里面过滤掉一些不合理的值 命名规范: 必须是对象方法 返回值类型为void 方法名必须以set开头,而且后面跟上成员变量名去掉"_&q ...

  10. DbUnit入门实战

    原文地址: http://yangzb.iteye.com/blog/947292 相信做过单元测试的人都会对JUnit 非常的熟悉了, 今天要介绍的DbUnit(http://dbunit.sour ...