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. gin中绑定html复选框

    main.go package main import "github.com/gin-gonic/gin" type myForm struct { Colors []strin ...

  2. Tomcat-Tomcat服务器实例使用的其他细节说明

    1,修改工程访问路径 context修改路径 ,访问的地址也会改变成一致 2,修改运行的端口号 3,修改运行时使用的浏览器 4,配置资源热部署

  3. mac 更新到big sur 后,parallels虚拟机的一些问题:由于您尚未获得访问其中一些文件的授权,所以您不能恢复“Windows 10

    由于您尚未获得访问其中一些文件的授权,所以您不能恢复"Windows 10 Mac上使用PD虚拟机,打开系统时提示"由于您尚未获得访问其中一些文件的授权,所以您不能恢复" ...

  4. 不难懂-----Mock基本使用

    一.mock解决的问题 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可能还原真 ...

  5. Elasticsearch(2) 数据搜索

    本文介绍如何在Elasticsearch中对数据进行搜索. 1.简述 在Elasticsearch中的搜索中,有两类搜索: queries aggregations 区别在于:query可以进行全文搜 ...

  6. Linux 查看运行中进程的 umask

    线上某台虚机因为故障重装了系统(基线 CentOS 6.9 内核 2.6.x),重新部署了应用.这个应用会生成一个文件,到NFS挂载目录. 而这个 NFS 挂载目录是一个 FTP 服务器的目录.另一台 ...

  7. Idea Error:java: System Java Compiler was not found in classpath:

    前言 这个问题和IDEA的版本有关系,或者有时不小心把项目错误操作了一步,导致出现,这个属于常见错误 解决办法 1:关闭项目,找一个正常运行的项目,将其.idea..mvn文件夹拷贝出来,替换到不能运 ...

  8. select 级联选择

    转载请注明来源:https://www.cnblogs.com/hookjc/ <script   language="javascript">   <!--   ...

  9. 使用C++开发PHP扩展

    目前,PHP编程语言也是相当成熟,各种文档,各种问题,只要Google一下,总有你想要的答案.当然"如何开发PHP扩展"的文章也不少,但是很少有专门来介绍使用C++开发PHP扩展的 ...

  10. Redis常用数据类型以及操作

    Redis常用数据类型以及操作 目录 Redis常用数据类型以及操作 一.String数据类型 1. SET/GET/APPEND/STRLEN 2. INCR/DECR/INCRBY/DECRBY ...