大家好，如果您还对企业生产管理网站源码分享制作不太了解，没有关系，今天就由本站为大家分享企业生产管理网站源码分享制作的知识，包括企业网站管理系统源码的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
官网资料
构建生产版本——库模式https://cn.vitejs.dev/guide/build.htmlbuild-lib
技术栈
viterollup
打包方式
vue-cli自带的是webpack的打包方式，打出的包体积有点大，而vite自带的是rollup的打包方式，这种方式打包的体积就非常小，官网也有一些使用说明，所以学会之后还是比较很方便的。
vite的库项目可以分为两类：（我自己分的）
一个是纯js的项目，不带HTML；一个是可以带上HTML（模板）的项目，比如UI库。
下面分别介绍一下编写和打包方式，其实大同小异。
纯js的库项目
使用vite建立项目，这里举一个简单的例子：
//main.js
\nconsttoTypeString=(val)=>{\nreturnObject.prototype.toString.call(val)\n}\n\nconsttypeName=(val)=>{\nreturnObject.prototype.toString.call(val).replace(/^\\[object(\\S+)\\]$/,&39;).toLowerCase()\n}\n\nconsthasOwnProperty=Object.prototype.hasOwnProperty\nconsthasOwn=(val,key)=>hasOwnProperty.call(val,key)\n\nconstisFunction=(val)=>toTypeString(val)===&39;\nconstisAsync=(val)=>toTypeString(val)===&39;\nconstisObject=(val)=>val!==null&&typeofval===&39;\nconstisArray=Array.isArray\nconstisString=(val)=>typeofval===&39;\nconstisNumber=(val)=>typeofval===&39;\nconstisBigInt=(val)=>typeofval===&39;\nconstisBoolean=(val)=>typeofval===&39;\nconstisRegExp=(val)=>toTypeString(val)===&39;\nconstisDate=(val)=>valinstanceofDate\nconstisMap=(val)=>toTypeString(val)===&39;\nconstisSet=(val)=>toTypeString(val)===&39;\nconstisPromise=(val)=>toTypeString(val)===&39;\nconstisSymbol=(val)=>typeofval===&39;\nconstisNullOrUndefined=(val)=>{\nif(val===null)returntrue\nif(typeofval===&39;)returntrue\nreturnfalse\n}\n\nfunctionlog(){\nif(window.__showlog)console.log(…arguments)\n}\nconstlogTime=(msg,auto=true)=>{\nconststart=()=>{\nif(window.__showlog)console.time(msg)\n}\nconstend=()=>{\nif(window.__showlog)console.timeEnd(msg)\n}\nif(auto)start()//自动开始计时\nreturn{start,end}\n}\n\nexport{\nlog,//打印调试信息\nlogTime,//计时\ntoTypeString,//Object.prototype.toString.call(val)\ntypeName,//获取可以识别的名称\n\nhasOwnProperty,\nhasOwn,\n\nisFunction,//验证普通函数\nisAsync,//验证async的函数\nisPromise,//验证Promise\nisObject,//验证Object\nisArray,//验证数组\nisString,//验证字符串\nisNumber,//验证number\nisBigInt,//验证BigInt\nisBoolean,//验证布尔\nisRegExp,//验证正则类型\nisDate,//验证日期\nisMap,//验证map\nisSet,//验证set\nisSymbol,//验证Symbol\n\nisNullOrUndefined//null或者undefined返回true\n}\n\n
代码比较简单，仅仅只是演示。
想要打包的话，只能有一个出口文件，所以内部的代码结构要设置好。
带HTML的库项目
纯js的好办了，export输出就好，那么带模板的怎么办呢？其实也是一样的。
用vite建立一个项目，建立一个测试文件：
//t-text.vue
模板部分：
<!–单行文本–>\n<template>\n<el-input\nv-model=&34;\n:id=&39;c&34;\n:name=&39;c&34;\n:size=&34;\n:clearable=&34;\n:validate-event=&34;\n:show-word-limit=&34;\n@blur=&34;\n@change=&34;\n@clear=&34;\n@input=&34;\n@keydown=&34;\n>\n</el-input>\n
代码部分
import{defineComponent}from&39;\n//按需索取的方式引入UI库（非必须）\nimport{ElInput}from&39;\n//引入组件需要的属性、表单子控件的管理类\nimport{itemProps,itemController}from&39;\n\nexportdefaultdefineComponent({\nname:&39;,\nprops:{\n&39;:ElInput,\nmodelValue:[String,Number],\n…itemProps//基础属性\n},\nemits:[&39;],\nsetup(props,context){\nconst{\nvalue,\nrun,\nclear,\nmyinput\n}=itemController(props,context.emit)\n\nreturn{\nvalue,\nrun,\nclear,\nmyinput\n}\n}\n})\n\n
这是基于UI库做的二次封装的库，使用了两个第三方插件：
一个是element-plus，采用按需加载的方式；一个是自己做的nf-ui-controller库。
然后我们设置一个入口文件main.js
importnfTextfrom&39;\n\nexport{\nnfText\n}\n
如果有很多组件的话，就要考虑好结构，这里只是举个例子。
设置vite.config.js
代码写好之后，需要设置一下vite.config.js
import{defineConfig}from&39;\nimportvuefrom&39;\nimport{resolve}from&39;//主要用于alias文件路径别名\n\nexportdefaultdefineConfig({\nplugins:[vue()],\n//打包配置\nbuild:{\nlib:{\nentry:resolve(__dirname,&39;),//设置入口文件\nname:&39;,//起个名字，安装、引入用\nfileName:(format)=>`nf-tool.${format}.js`//打包后的文件名\n},\nsourcemap:true,//输出.map文件\nrollupOptions:{\n//确保外部化处理那些你不想打包进库的依赖\nexternal:[&39;],\noutput:{\n//在UMD构建模式下为这些外部化的依赖提供一个全局变量\nglobals:{\nvue:&39;\n}\n}\n}\n}\n})\n\n
entry：指定要打包的入口文件。name：包的名称fileName：包文件的名称，默认是umd和es两个文件。sourcemap：是否生成.map文件，默认是不会生成的，如果需要的话需要设置为true。rollupOptions：如果项目引用了第三方插件，那么需要在这里设置排除，如果不设置的话，第三方插件的源码也会被打包进来，这样打包文件就变大了。排除之后第三方的插件会单独存在。
vite会按照这里的设置进行打包，打包分为两种模式：
umd：打包后代码很紧凑、体积小，但是不易读；es：打包后的代码和我们写的代码很像，易读，但是体积大。
第三方插件的处理方式
如果项目使用了第三方的插件，那么需要在external里面做设置：
import{defineConfig}from&39;\nimportvuefrom&39;\nimport{resolve}from&39;//主要用于alias文件路径别名\n\n//https://vitejs.dev/config/\nexportdefaultdefineConfig({\nplugins:[vue()],\n//打包配置\nbuild:{\nlib:{\nentry:resolve(__dirname,&39;),\nname:&39;,\nfileName:(format)=>`nf-ui-element-plus.${format}.js`\n},\nsourcemap:true,\nrollupOptions:{\n//确保外部化处理那些你不想打包进库的依赖\nexternal:[&39;,&39;,&39;],//注意看这里\noutput:{\n//在UMD构建模式下为这些外部化的依赖提供一个全局变量\nglobals:{\nvue:&39;,\n&39;:&39;,\n&39;:&39;\n}\n}\n}\n}\n})\n\n
设置之后，第三方插件的代码，会以import的方式被引用。如果不做设置的话，就会把第三方插件里面使用到的代码，拿出来作为项目内部代码一起被打包，这样包的体积就变大了。
设置package.json
设置package.json主要是发布的时候做资源包的说明，需要按照npm的要求设置属性：
{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:[&34;],\n&34;:&34;,\n&34;:&34;,\n&34;:{\n&34;:{\n&34;:&34;,\n&34;:&34;\n}\n},\n&34;:false,\n&34;:&34;,\n&34;:&34;,\n&34;:{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;\n},\n&34;:{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;\n},\n&34;:{\n&34;:&34;,\n&34;:&34;\n}\n}\n
如果在安装资源包的时候，不想自动安装第三方插件的话，需要去掉dependencies和devDependencies，否则会自动安装里面涉及到的第三方插件。
打包
设置好之后我们可以用yarnbuild进行打包。
打包后的文件是这种风格：
nf-tool-es.jsnf-tool-umd.js
发布资源包到npmjs.com
简单介绍一下步骤：
先到npmjs.com网站注册账号；到注册邮箱激活账号；打开终端，使用npmlogin登录；使用npmpublish发布；
篇幅有限，细节就不介绍了。
安装资源包
我喜欢使用yarn安装资源包，因为速度更快一些。
yarnaddnf-tool\n
package.json里面设置的名称就是安装用的名称，所以要起个好的名称，另外不能和现有的名称重复。
如果一个项目即是库项目，又需要发布到网站怎么办？
为啥会有这样的需求？库项目在编写的时候，需要一个开发环境，一边写代码，一边运行看效果。写好之后需要按库项目的方式打包。然后是不是需要一个测试环境，或者演示环境？
如果再建立一个项目写测试和演示，那么就有点麻烦了，如果可以在一个项目搞定就方便多了。这个时候就需要设置不同的vite.config.js。
之前使用注释的方式，改来改去的比较麻烦。现在发现vite提供了“模式”的方式，允许我们在vite.config.js里面做不同的设置。
设置.env文件
按照官网的说明，我们可以建立多个.env.*文件，来存放不同的“模式”：
.env：开发环境（默认）
VITE_BASEURL=./\n
.env.project：测试、演示环境
VITE_BASEURL=nf-rollup-tool\n
.env.lib：库打包
VITE_BASEURL=lib\n
模式设置好之后我们来修改vite.config.js
修改vite.config.js
在vite.config.js里面，首先定义不同的defineConfig备用，然后使用loadEnv读取模式值，根据模式返回对应的defineConfig。
import{defineConfig,loadEnv}from&39;\nimportvuefrom&39;\nimport{resolve}from&39;//主要用于alias文件路径别名\nconstpathResolve=(dir)=>resolve(__dirname,&39;,dir)\n\n//发布库的设置\nconstlib=defineConfig({\nplugins:[vue()],\n//打包配置\nbuild:{\nlib:{\nentry:resolve(__dirname,&39;),\nname:&39;,\nfileName:(format)=>`nf-tool.${format}.js`\n},\nsourcemap:true,\nrollupOptions:{\n//确保外部化处理那些你不想打包进库的依赖\nexternal:[&39;],\noutput:{\n//在UMD构建模式下为这些外部化的依赖提供一个全局变量\nglobals:{\nvue:&39;\n}\n}\n}\n}\n})\n\n//开发模式、生产模式\nconstproject=(url)=>{\nreturndefineConfig({\nplugins:[vue()],\ndevtools:true,\nresolve:{\nalias:{\n&39;:resolve(__dirname,&39;,&39;),\n&39;:pathResolve(&39;)//\n}\n},\nbase:url,\n//打包配置\nbuild:{\nsourcemap:true,\noutDir:&39;,//指定输出路径，要和库的包区分开\nassetsDir:&39;,//指定生成静态资源的存放路径\nrollupOptions:{\noutput:{\nchunkFileNames:&39;,\nentryFileNames:&39;,\nassetFileNames:&39;\n},\nbrotliSize:false,//不统计\ntarget:&39;,\nminify:&39;//混淆器，terser构建后文件体积更小\n}\n}\n})\n}\n\n//用loadEnv读取模式，然后返回对应的defineConfig\nexportdefault({mode})=>{\nconsturl=loadEnv(mode,process.cwd()).VITE_BASEURL\nif(url===&39;){\n//打包库文件\nreturnlib\n}else{\n//开发模式、生产模式\nreturnproject(url)\n}\n}\n
注意：需要设置不同的输出的文件夹，否则会互相覆盖。
修改package.js
设置执行的命令，后面加上需要的模式。
&34;:{\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;\n}\n
这样就可以把不同的环境完全分开了，如果有其他的需求，还可以增加更多的模式。
更改后的打包命令
yarndev//开发环境\nyarnbuild//打包发布到网站，演示\nyarnlib//打包库项目，做成资源包\n
这样各司其职，互不干扰，也不用各种写注释了。
CDN
项目打包发布到npmjs.com之后，就可以用https://unpkg.com/xxx的方式访问，xxx表示资源包的名称，比如：
https://unpkg.com/element-plus
https://unpkg.com/nf-tool
https://unpkg.com/nf-ui-controller
https://unpkg.com/nf-ui-element-plus
等
关于本次企业生产管理网站源码分享制作和企业网站管理系统源码的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。