vue.config.js配置文件(build包通用)

2024-04-27 13:08

本文主要是介绍vue.config.js配置文件(build包通用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue.config.js配置文件

const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
const webpack = require('webpack')module.exports = {/* # # 基本路径 */publicPath: process.env.NODE_ENV === 'production' ? './' : '/',/* # # 输出文件目录--默认dist */outputDir: 'dist',/* # # 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。*/// assetsDir: '',/* # # 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。*/indexPath: 'index.html',/* # 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。*/filenameHashing: true,/* # 构建多页时使用 */pages: undefined,lintOnSave: true,/* # 是否使用包含运行时编译器的Vue核心的构建 */runtimeCompiler: false,/* # 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来 */transpileDependencies: [],/* # 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。*/productionSourceMap: false, /* # 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。*/crossorigin: undefined,/* # 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。*/integrity: false,/* # webpack-dev-server 相关配置 */devServer: {host: '0.0.0.0',port: 9000,https: false,open: true,hotOnly: false,proxy: null, // 设置代理hot:true},/* # 对内部的 webpack 配置进行更细粒度的修改。*/chainWebpack: (config) => {  // 修复HMRconfig.resolve.symlinks(true);//修复 Lazy loading routes Errorconfig.plugin('html').tap(args => {args[0].chunksSortMode = 'none';return args;});// 添加别名config.resolve.alias.set('@', resolve('src')).set('assets', resolve('src/assets')).set('common', resolve('src/common')).set('components', resolve('src/components'));},/* # 是否为 Babel 或 TypeScript 使用 thread-loader。*/parallel: require('os').cpus().length > 1,/* # PWA 插件相关配置 */pwa: {},/* # 第三方插件配置 */pluginOptions: {}
}

注意:检查该文件是否在项目文件夹里面(自己经常放的层级不对,build错误了)

这篇关于vue.config.js配置文件(build包通用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/940588

相关文章

Vue2之父子组件传值中使用watch监听props中的对象

Vue2之父子组件传值中使用watch监听props中的对象 文章目录 Vue2之父子组件传值中使用watch监听props中的对象1. 子组件2. 父组件 1. 子组件 BasicInfoForm.vue如下 <template><el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="15

PHP基于vscode医院安全不良事件管理系统源码(AEMS)前端vue2+element+后端laravel8不良事件上报与闭环管理

PHP基于vscode医院安全不良事件管理系统源码(AEMS)前端vue2+element+后端laravel8不良事件上报与闭环管理 医院不良事件上报与管理系统结合现代医院管理思路,遵照PDCA全面质量循环管理方法而设计,并在多家大型三甲医院成熟运用。系统从事件上报、基于人、机、料、法 、环的RCA分析、事件整改、效果评估实现了结构化、标准化、智能化的管理和分析,满足医院可追溯化、全流

react 实践

1、安装react-dom npm i react-dom --save 2、实例 import React, { Component } from 'react';import ReactDOM from 'react-dom';// Parent Componentclass GroceryList extends Component {render() {return (<ul><

uni-app+vue3 +uni.connectSocket 使用websocket

前言 最近在uni-app+vue3+websocket实现聊天功能,在使用websocket还是遇到很多问题 这次因为是app手机应用,就没有使用websocket对象,使用的是uni-app的uni.connectSocket 为了方便测试这次用的是node.js一个简单的dom,来联调模拟发数据,过程有意思 首先模拟一个node.js服务来测试-代码实现 1.在桌面建立一个空文

JS方法获取并设置随机颜色

/*从预设颜色中获取并赋值随机颜色*/function getMathColor(){var arr = new Array();arr[0] = "#ffac13";arr[1] = "#83c44e";arr[2] = "#2196f3";arr[3] = "#e53935";arr[4] = "#00c0a5";arr[5] = "#16A085";arr[6] = "#ee3768";v

Angular中的管道(Pipe)

Angular中的管道(Pipe) 文章目录 Angular中的管道(Pipe)前言一、内置管道1. date管道格式化日期2. currency管道格式化货币3. uppercase和lowercase管道转换字符串大小写4. 小数位数5. JavaScript 对象序列化6. slice7. 管道链 二、自定义管道 前言 Angular中的管道(Pipes)是一种

JS实现Bootstrap中的Nav自动轮播切换

1.直接上JS <script>//Add by liangxin at 2020-10-27 22:34:53$(function () {var i = 0;setInterval(function(){if(i==5){i=0;} //Nav Count$('#myTab li:eq('+i+') a').tab('show');i++;},5000);});</script> 2.

【Node.js从基础到高级运用】二十八、Node.js 内存管理浅析

Node.js 作为一个基于 Chrome V8 引擎的 JavaScript 运行环境,其性能和效率在很大程度上取决于内存管理的优劣。 1. Node.js 内存结构 在深入了解内存管理之前,我们需要先了解 Node.js 的内存结构。Node.js 的内存可以大致分为以下几个部分: 堆内存(Heap):存放 JavaScript 对象和闭包等。栈内存(Stack):存放基本类型变量

linux中通用GPIO接口的操作

在linux嵌入式设备开发中,对GPIO的操作是最常用的,在一般的情况下,一般都有对应的驱动,应用程序打开对应的驱动,然后通过ioctl函数就可以对其进行操作。在linux中,其实有一个通用的GPIO驱动,应用通过调用文件的形式来进行读写操作,这个文件是/sys/class/gpio,本文就简单的来讲解一下通用GPIO接口的读写。 一、 以echo的形式调用system函数

找不到模块“vue-router”。你的意思是要将 moduleResolution 选项设置为 node,还是要将别名添加到 paths 选项中?

在tsconfig.app.json中添加,记得一定是 tsconfig.app.json 中,如添加到 tsconfig.node.json 还是会报错的 哈哈哈哈,不瞒你们,我就添加错了,哈哈哈。所以这也算写一个demo提醒自己 "compilerOptions": {"composite": true,"tsBuildInfoFile": "./node_modules/.tmp