前言
- 我相信有很多小伙伴们是使用内网进行开发的，我就是其中一位。
- 由于工作中使用的UI库主要是element-ui，但是内网开发，看不了官方文档真心不方便，于是打算把官网部署到本地环境。
1.下载源码
1.1 在elementUI官网上有源码地址。Github地址，但是我的电脑Github打不开，所以我选择了码云：gitee，码云地址
1.2 npm install 安装依赖
1.3 分析package.json文件
"scripts": {
"bootstrap": "yarn || npm i",
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:umd": "node build/bin/build-locale.js",
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
"deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
"dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
"dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
"i18n": "node build/bin/i18n.js",
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js",
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
},
2.通过npm run dev 运行项目
2.1 找到dev指令，看到执行内容为：
"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
dev干了很多事，我们先只看 webpack-dev-server启动的哪个配置文件，webpack.demo.js，看一下这个配置文件内容
2.2 webpack.demo.js 文件部分入选
const webpackConfig = {
mode: process.env.NODE_ENV,
entry: isProd ? {
docs: './examples/entry.js'
} : (isPlay ? './examples/play.js' : './examples/entry.js'),
output: {
path: path.resolve(process.cwd(), './examples/element-ui/'),
publicPath: process.env.CI_ENV || '',
filename: '[name].[hash:7].js',
chunkFilename: isProd ? '[name].[hash:7].js' : '[name].js'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: config.alias,
modules: ['node_modules']
},
devServer: {
host: '0.0.0.0', // '127.0.0.1',
port: 8085,
publicPath: '/',
hot: true,
before: (app) => {
/*
* 编辑器类型 :此处的指令表示的时各个各个编辑器在cmd或terminal中的命令
* webstorm
* code // vscode
* idea
*/
app.use('/__open-in-editor', launchEditorMiddleware('code'));
}
},
};
- 本地运行的入口文件是 examples/entry.js ,事实上这个文件正式文档部分源码的入口文件（example目录下是官方文档源码）
devServer中端口是8085，将host改为：'127.0.0.1'。
通过npm run dev开始启动。
cmd.jpg
本地启动结果如下图：
本地启动图
2.通过npm run deploy:build 打包项目
- 我们可以本地启动官方文档，那怎样把官方文档打包呢？
"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
- 它做了什么呢？ 打包项目 并且修改 NODE_EVN 然后 build
webpack.demo.js，所以还是在webpack.demo.js文件下：
打包位置
- 在examples文件夹下会生产一个element-ui文件夹，这里就是打包的内容。
3.通过nodejs启动项目
3.1 在examples文件下element-ui文件就是打包的文件。此时可以同过nodejs 启动项目
- vscode插件：GO Live 进行打开
- 使用
anywhere进行打开：anywhere静态文件服务器 - 通过express代理，通过
node app.js进行打开
nodejs 项目目录如下：
├── element-ui //element-ui 打包后的文件
├── node_modules //依赖包
├── app.js //项目启动文件
├── package.json
└── package-lock.json //安装路径，可以删除掉，留着反而没什么用
ps：app.js文件名称包括打包依赖名称也可以修改，在启动时 node 启动名称 即可
3.1.2 app.js 文件内容
const express = require('express')
const app = express()
//静态文件托管
app.use(express.static('./element-ui'))
app.listen(3001 , ()=>{
console.log('web Sever running at http://127.0.0.1:3001');
})
3.1.3 package.json文件内容
{
"name": "element-ui",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
- 如果想发布到服务器上可以看这里:Liunx服务器nodejs后台发布项目
nodejs启动结果如下图：
🍑 哈哈，nodejs启动效果和本地启动效果一样，此地不用给配图了。
4.内网部署问题
4.1 此时项目已经运行成功，将整个项目直接拷贝到内网开发电脑上去，并在内网电脑启动。
但是在此时，却出现了错误：
内网错误
错误原因：
- 错误上表示是没有找到vue，说明vue没有引入。
-
实际上，我们打开elemen-ui下的index.html文件发现是通过链接从线上直接引入的vue
错误原因
- 但是由于是内网开发，所以我们不能使用从外部引入的js文件。
- 直接把引入的链接地址复制并在浏览器中访问，保存文件，到项目的目录中。
需要修改位置如下：
2023-08-22_10-56-00.png
ps:因为最初以为就只有js所以就在根目录新建了js文件夹。
重新引入后，通过node app.js命令就可以打开啦
4.2 .bat自动启动
- 因为element-ui开发时要经常使用，所以要每天都打开一遍，并且启动比较麻烦，所以就写了个
.bat文件，只要双击一下即可一键启动
@echo off
cd /D D:\Test\element-UI
start /B node ./app.js
start "" "http://172.18.202.175:3001/#/zh-CN"
exit
ps:项目位置需要根据使用者项目的位置修改！ 第四行start.... 是表示自动打开这个地址，你想要的自动打开地址的话，可以将自己的ip地址替换。
4.3 .vbs自动启动
- .bat自动启动已经很方便了，但为什么要使用.vbs呢？
因为我发现通过.bat启动，电脑上便会有一个cmd命令大黑框，在切换页面时也会不小心切换到，有点不方便。所以使用.vbs文件运行.bat,这样的话不会在电脑上留下cmd命令大黑框，实现无感使用。只要双击一下即可一键启动 。
Set WshShell = CreateObject("WScript.Shell")
WshShell.Run "cmd /c ""@echo off & cd /D D:\Test\element-UI & start /B node ./app.js & exit""", 0, False
Set WshShell = Nothing
ps：删除了自动打开地址的代码
4.4 .vbs文件开机自启动
- .vbs启动已经很方便了，但是每次开机都需要双击一下文件，还是有点麻烦；
操作步骤：
- win + R 打开运行框
2.输入 shell:startup ,会打开一个自启动文件夹
3.将.vbs复制过去即可，建议可以将.vbs文件发送桌面快捷方式，然后复制桌面快捷方式复制进去
end 结束，只要每次开机，element-ui 项目就会自启动，需要查看文档的时候直接使用即可
ps:和你在同一个局域网下的同事，也能够通过访问你的ip，访问你启动的这个项目，实现一人努力，全组受益
参考地址： 将ELEMENTUI官方文档部署到本地
码云代码地址：element-ui本地启动项目
网友评论