Vue build 打包和部分vue-config-js配置

墨蓝 2023-02-12 09:22 3阅读 0赞

# vue 打包 #

当我们使用`vue`写好项目后我们需要将项目进行打包成`html`项目，使用一下命令可以打包项目。

`npm run build`

在当前目录下输入打包命令，等待打包完成后在根目录生成一个`dist`的文件夹，里面是`html`页面和`css，js，img`文件夹。

-- dist
     	-- css
     	-- js
     	-- img
     	-- index.html

当然这个`html`项目我们无法通过双击的形式打开，我们需要创建一个服务才能运行此项目。

# vue-config-js配置 #

在`vue`项目里创建`vue.config.js`的文件，我们可以在里面配置项目，在打包的时候会按照配置的内容进行打包。

// vue.config.js
    
    module.exports = { 
    	// ...body
    }

###### productionSourceMap 是否包含map映射文件 ######

默认为`true`，设置为`false`后就不会存在`map`映射文件；用于追踪线上错误信息，没什么太大的作用，因为项目有问题是不会上线。

const path = require("path");
    module.exports = { 
        productionSourceMap: false
    }

###### outputDir 输出的文件夹名称 ######

默认输出文件夹为`dist`，我们也可以去修改他。

// vue.config.js
    
    module.exports = { 
    	outputDir： './myDist'
    }

###### assetsDir 设置静态资源在同一个文件夹 ######

// vue.config.js
    
    module.exports = { 
    	assetsDir： 'assets'
    }

将`css`，`js`和`img`文件夹放在同一个文件夹中，目录结构如下

-- dist
     	-- assets
    	 	-- css
    	 	-- js
    	 	-- img
     	-- index.html

###### devServer 设置代理 ######

在实际开发过程中，前后端分离必定会存在跨域，设置代理解决这个问题。

// vue.config.js
    
    module.exports = { 
    	devServer： { 
    		proxy： { 
    			// 为单个请求设置代理
    			"/getData" : { 
    				target : "http://localhost:3000"
    			}
    		}
    	}
    }

// vue.config.js
    
    module.exports = { 
    	devServer： { 
    		// 统一设置代理
    		proxy：  "http://localhost:3000"
    	}
    }

当然打包还有很多的配置，在网上也会有很多配置vue-config-js的博客，有兴趣可以搜索前往阅读。

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android配置build.gradle的productFlavors多渠道打包

Android配置build.gradle的productFlavors多渠道打包 Android在分发不同市场的release包时候，在中国经常会遇到各个不同市场需要编

叁歲伎倆/ 2023年10月18日 10:19/ 0 赞/ 204 阅读

相关 vue打包npm run build报错

vue打包npm run build报错：近期领导要求用vue做一个项目，最近在研究和学习vue，在项目打包时一直报错，这个问题困扰了好久，尝试了很多网上办法，但都没有

客官°小女子只卖身不卖艺/ 2023年06月19日 02:56/ 0 赞/ 213 阅读

相关 vue项目build打包优化

安装打包优化插件 CompressionWebpackPlugin Gzip打包压缩，压缩js、html、css terser-webpack-p

左手的ㄟ右手/ 2023年06月05日 08:20/ 0 赞/ 57 阅读

相关 Vue build 打包和部分vue-config-js配置

vue 打包当我们使用`vue`写好项目后我们需要将项目进行打包成`html`项目，使用一下命令可以打包项目。 `npm run build` 在当前目录下输入打包

墨蓝/ 2023年02月12日 09:22/ 0 赞/ 4 阅读

相关 vue脚手架 build-config文件夹（跨域/打包）相关配置

1,跨域解决点开config文件夹下的index.js文件找到 proxyTable（英文：代理-表格）下进行配置，如下（路径配置必须绝对路径） build:\{ /

阳光穿透心脏的1/2处/ 2022年10月05日 12:59/ 0 赞/ 171 阅读

相关 vue项目打包报错“vue-cli-service build “解决方案

vue项目打包报错，错误如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

川长思鸟来/ 2022年09月04日 05:43/ 0 赞/ 853 阅读

相关 Nginx发布Vue项目【 CentOs7，build打包】

> 1、所有文章优先发表在个人博客，后续如果有修改的话，可能忘记更新到CSDN了，给你带来不便，抱歉。 > > 2、个人博客本篇文章地址： [https://www.xdx

梦里梦外;/ 2022年04月16日 02:08/ 0 赞/ 324 阅读

相关在Eclipse中配置Maven build打包+vue打包

在Eclipse中配置Maven build打包 1. 项目右击–>Run As–>Run Configurations 2. 在左侧Maven Build下选中自己

喜欢ヅ旅行/ 2021年09月27日 10:42/ 0 赞/ 667 阅读

相关 React react-cli 简单配置根目录和build打包访问路径

配置之前需要把配置文件暴露出来使用 eject 暴露配置文件, 注意这个操作不可逆 npm run eject 配置根目录访问 1. 配置

电玩女神/ 2021年09月21日 13:22/ 0 赞/ 395 阅读

相关 vue使用npm run build命令打包项目

vue使用npm run build命令打包项目当我们使用vue-cli脚手架完成一个项目的时候，下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢，我

水深无声/ 2021年08月30日 16:19/ 0 赞/ 752 阅读