vue3打包(vue3打包exe)

详细解读Vue如何配置打包工具

本篇文章主要介绍了详解Vue快速零配置的打包工具——parcel，现在分享给大家，也给大家做个参考。

vue3打包(vue3打包exe)

vue3打包(vue3打包exe)

本文介绍了Vue快速零配置的打包工具——parcel，分享给大家，具体如下：

特性

快速打包

打包所有资源

自动转换

代码拆分

模块热替换

友好的错误记录

如何工作

Parcel 将 资源 树转换成 包(bundles) 树。许多其它的打包工具基本上是基于 JaScript 资源，还有附加在其上的其它格式的资源。例如，在 JS 文件中内联成字符串。 Parcel是对文件类型无感知的，它能按你所期待的方式那样与任意类型的资源工作，且毋须配置。

构建资源树

Parcel 接受单个入口资源作为输入，可以是任意类型：JS、HTML、CSS、文件等等。在 Parcel 中定义了许多不同的资源类型，它知道如何去处理特定的文件类型。资源会被解析，资源的依赖会被提取，资源会被转换成终编译好的形态。此过程创建了一个资源树。

构建文件束树

一旦资源树被构建好，资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束，然后动态的 import() 会被创建成子文件束 ，这引发了代码的拆分。当不同类型的文件资源被引入，兄弟文件束就会被创建。例如你在 JaScript 中引入了 CSS 文件，那它会被放置在一个与 JaScript 文件对应的兄弟文件束中。如果资源被多于一个文件束引用，它会被提升到文件束树中近的公共祖先中，这样该资源就不会被多次打包。

打包

在文件束树被构建之后，每个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来，生成到终被浏览器加载的文件中。

配置

初始化项目

npm install -g parcel

mkdir xxx && cd xxx && npm init -y转换

Babel

npm install babel-preset-env --se-dev根目录配置.babelrc

{"presets": ["env"]

}PostCSS

npm install tcss-modules autoprefixer --se-dev根目录配置.tcssrc

{"modules": true,

"plugins": {

"autoprefixer": {

"grid": true

}}

}支持vue

npm install parcel-plugin-vue --se-dev添加entry

import App from './App.vue'

import router from './router/index.js'

import './assets/js/rem.js'

window.onload = () => {

const vm = new Vue({

el: '#app',

router,

render: h => h(App)

})

}配置index.html

配置路由(代码拆分--懒加载)

{path: 'home',

component: () =>import('../pages/home.vue')

}import()返回的是一个promise,所以也可以用 async/await 语法，当你想在本地使用 async/await 语法，请引入 babel-polyfill

区分生产环境和开发环境，配置package.json.

dev --- 开发环境

build --- 生产环境

"scripts": {

"dev": "parcel index.html -p 3700",

"build": "parcel build index.html"

}大功告成

访问://localhost:3700/home

此demo是vue + parcel + grid +stylus完成 : parcel-vue

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue.js中如何获取select中的value值（详细教程）

在Vue中如何使用slot实现插槽分发内容

在vue中如何实现封装可复用的组件

在JaScript中如何实现判断日期时间

在vue2.0子组件中如何实现改变props值,并向父组件传值

vue3打包部署到vue2项目运行

打开工程目录下的ehome。vue3和vue2项目两个是联系在一起的，打包部署到vue2项目运行只需要打开工程目录下的ehome即可。Vue是一套用于构建用户界面的渐进式JaScript框架。

vue如何自动化打包测试环境和正式环境的dist/test文件

使用vue现在已经不多2年了，想起来两年前的一次和某阿里处理的技术大牛（当时我们的技术总监）一起开发一个SPA项目的时候被硬着头皮去解决的一个难题，因为技术老大是阿里出身的，所以很多东西都是比较倾向于自动化，从项目ui设计到项目管理，到打包测试，到发布全部都要求我们要实现自动化，尽可能的减少手动作。

当时技术大佬要求的事在jenkins进行一键打包，就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包，刚刚接触vue的我摸不着头脑，老大给了我一天时间研究这个玩意，没办法，只好硬着头皮做，后来想想改造一下，也比较简单。

Step1、package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。 Step2、在在build文件夹中新建test.js,内容可以直接拷贝同目录build.js内容,修改一些参数 这样就多了个test环境

Step3、在build文件夹中新建webpack.test.conf.js,内容可以直接拷贝同目录webpack.prod.conf.js内容,修改一些参数。

这样构建时就会去config文件夹下的test.env.js寻找环境变量。 Step4、在config下创建test.js文件

Step5、在封装的axios.js的文件夹下创建config.js

Step6、在封装的axios引入config.js

封装的get 和t请求

Step7、在config文件下的index增加test模块（可build）并更改相应的参数。

在打包的时候执行：npm run test 就会自动的指向测试环境的域名dist文件，执行npm run build 就会打包指向正式环境的域名的dist文件，在Jenkins里面的分别连接至gitlab/github,并将命令分别分配给run test && run build，需要发布的时候就直接点击不同的按钮，然后再Linux下自动打包不同环境的dist，可以提高开发效率，减少开发和沟通成本。

vue3.0打包语言报错zh-cn

zh-cn是指中文简体，如果vue3.0打包语言报错，可能是因为vue3.0支持的语言不包括zh-cn，你可以按照vue3.0文档，查看支持的语言，然后修改语言参数。

vue3.0 + ts 打包ui组件

在使用微应用中， 通常子应用都是基于一套技术栈开发。其中就包括ui组件，很多二次封装组件需要在各个子应用中使用到。

所以将这些公共组件出来，作为第三方库使用。需要注意的是，这里的ui库也是基于已有开源库的扩展，而非fork后的二次开发。

技术栈 ： ant TS Vue3.0

vue-cli 已经提供了对于ui包的打包配置 详情 , 这里我们使用了 Ts 所以除了打包资源文件外，还需要生成对应的 file.d.ts 类型定义。 这部分需要我们自己动手生成, 参考 ant iview 我们使用 gulp 实现相关功能

构建业务组件时， 难免需要依赖其他第三方或自定义包，而这些包，可能已经包含在应用依赖中。所以打包时需要屏蔽相关依赖包。

这里只是使用vue-cli 的预设配置打包出自己的ui组件库， 使用gulp导出类型定义。

可以看到通过gulp我们可以分离 ts 编译文件 和 类型定义文件，只生产我们所需的目标文件。

除了生产 umd 模块外， 如需要提供ES6 模块， 我们需要自己配置相关打包处理，可以参考 ant 的打包方案。