新手ubuntu服务器上安装vue
1. 介绍
官网:https://cn.vuejs.org/guide/introduction
2. 安装环境
ubuntu 20.04
3. 安装
ubuntu安装vue
- 看vue官网说明需要先安装node.js 18+版本和npm。
- 国内需要替换镜像源。
3.1. 安装node.js与npm
查看当前版本
ubuntu 20.04系统自带了node.js但版本太旧。
root@ubuntu:~# node -v
v10.19.0
root@ubuntu:~# npm -v
6.14.4
更新版本
ubuntu 20.04安装node.js 18.3版本
//安装命令
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
root@ubuntu:~# node -v
v18.20.6
root@ubuntu:~# npm -v
10.8.2
3.2. 安装vue
设置镜像源
可用的npm镜像源:https://www.cnblogs.com/alannxu/p/18583348
镜像站:
https://www.npmmirror.com/
https://blog.51cto.com/u_16213595/10138922
我使用华为镜像源可以安装成功。设置镜像源的方法:
root@ubuntu:~# npm config set registry https://mirrors.huaweicloud.com/repository/npm/
root@ubuntu:~# npm config get registry
https://mirrors.huaweicloud.com/repository/npm/
建议:如果安装提示网络问题就多试试其他镜像源。
安装vue3
root@ubuntu:~# npm install vue@3 --verbose
npm verbose cli /usr/bin/node /usr/bin/npm
npm info using npm@10.8.2
npm info using node@v18.20.6
npm verbose title npm install vue@3
npm verbose argv "install" "vue@3" "--loglevel" "verbose"
npm verbose logfile logs-max:10 dir:/root/.npm/_logs/2025-02-06T08_33_18_076Z-
npm http fetch GET 200 https://mirrors.huaweicloud.com/repository/npm/picocolors 193ms (cache updated)
added 23 packages in 8s
3 packages are looking for funding
run `npm fund` for details
npm verbose cwd /root
npm verbose os Linux 5.4.0-204-generic
npm verbose exit 0
npm info ok <<< 没有报错就说明安装成功
3.3. 验证vue:创建工程
参考:https://www.runoob.com/vue3/vue3-install.html
创建工程
root@ubuntu:~# npm init vue@latest
Need to install the following packages:
create-vue@3.14.0
Ok to proceed? (y) y
> npx
> create-vue
Vue.js - The Progressive JavaScript Framework
✔ Project name: … myvue <<< 工程名,接下来的选项可以都回车选默认值即可。
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No
Scaffolding project in /root/myvue...
Done. Now run:
cd myvue
npm install
npm run dev
根据提示运行工程
root@ubuntu:~# cd myvue
root@ubuntu:~/myvue# npm install
added 145 packages in 54s
42 packages are looking for funding
run `npm fund` for details
root@ubuntu:~/myvue# npm run dev
> myvue@0.0.0 dev
> vite
VITE v6.1.0 ready in 813 ms
➜ Local: http://localhost:5173/ <<< 访问地址
➜ Network: use --host to expose
➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
➜ press h + enter to show help
浏览器访问vue工程
浏览器访问vue提供的http服务。我的vue工程在服务器172.16.100.43上就需要把localhost替换为服务器IP。
http://172.16.100.43:5173/
可以看到web页面就成功了!
4. 遇到的问题
4.1. npm error network
现象
// npm安装vue慢
root@ubuntu# npm install --registry=https://registry.npm.taobao.org vue
⠹^C
root@ubuntu# npm install vue@latest
⠧^C
root@ubuntu:~# npm install -g @vue/cli --verbose
npm verbose cli /usr/bin/node /usr/bin/npm
npm info using npm@10.8.2
npm info using node@v18.20.6
npm verbose title npm install @vue/cli
root@ubuntu:~# npm cache clean --force
npm warn using --force Recommended protections disabled.
root@ubuntu# npm install vue@3
npm error code ETIMEDOUT
npm error syscall connect
npm error errno ETIMEDOUT
npm error network request to https://registry.npmmirror.com/vue failed, reason: connect ETIMEDOUT 2408:8719:3000:5:3::3fa:443
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly. See: 'npm help config'
npm error A complete log of this run can be found in: /root/.npm/_logs/2025-02-06T06_37_06_153Z-debug-0.log
root@ubuntu# npm install -g @vue/cli --verbose
npm verbose cli /usr/bin/node /usr/bin/npm
npm info using npm@10.8.2
npm info using node@v18.20.6
npm verbose title npm install @vue/cli
npm verbose argv "install" "--global" "@vue/cli" "--loglevel" "verbose"
npm verbose logfile logs-max:10 dir:/root/.npm/_logs/2025-02-06T06_51_49_436Z-
npm verbose logfile /root/.npm/_logs/2025-02-06T06_51_49_436Z-debug-0.log
npm http fetch GET https://registry.npmmirror.com/@vue%2fcli attempt 1 failed with ETIMEDOUT
npm http fetch GET https://registry.npmmirror.com/@vue%2fcli attempt 2 failed with ETIMEDOUT
npm http fetch GET https://registry.npmmirror.com/@vue%2fcli attempt 3 failed with ETIMEDOUT
npm verbose type system
npm verbose stack FetchError: request to https://registry.npmmirror.com/@vue%2fcli failed, reason: connect ETIMEDOUT 2408:8719:3000:5:3::3fa:44
npm verbose stack at ClientRequest.<anonymous> (/usr/lib/node_modules/npm/node_modules/minipass-fetch/lib/index.js:130:14)
npm verbose stack at ClientRequest.emit (node:events:517:28)
npm verbose stack at _destroy (node:_http_client:882:13)
npm verbose stack at onSocketNT (node:_http_client:902:5)
npm verbose stack at process.processTicksAndRejections (node:internal/process/task_queues:83:21)
npm error code ETIMEDOUT
npm error syscall connect
npm error errno ETIMEDOUT
npm error network request to https://registry.npmmirror.com/@vue%2fcli failed, reason: connect ETIMEDOUT 2408:8719:3000:5:3::3fa:443
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly. See: 'npm help config'
npm verbose os Linux 5.4.0-204-generic
npm verbose node v18.20.6
npm verbose npm v10.8.2
npm verbose exit 1
npm verbose code 1
npm error A complete log of this run can be found in: /root/.npm/_logs/2025-02-06T06_51_49_436Z-debug-0.log
解决
替换镜像源
4.2. yarn:trouble with your network connection
现象
root@ubuntu:~# yarn --version
0.32+git
// 安装yarn
root@ubuntu:~# apt-get update
root@ubuntu:~# sudo apt-get install yarn
Reading package lists... Done
root@ubuntu:~# yarn --version
1.22.22
root@ubuntu:~# curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
OK
root@ubuntu:~# echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
root@ubuntu# yarn create vue
yarn create v1.22.22
[1/4] Resolving packages...
info There appears to be trouble with your network connection. Retrying...
⠂ create-vue^C
root@ubuntu# yarn config get registry
https://registry.yarnpkg.com
root@ubuntu# yarn config set registry https://mirrors.jd.com/npm/
yarn config v1.22.22
success Set "registry" to "https://mirrors.jd.com/npm/".
Done in 0.03s.
root@ubuntu# yarn global add @vue/cli
yarn global v1.22.22
[1/4] Resolving packages...
error Error: certificate has expired
at TLSSocket.onConnectSecure (node:_tls_wrap:1659:34)
at TLSSocket.emit (node:events:517:28)
at TLSSocket._finishInit (node:_tls_wrap:1070:8)
at ssl.onhandshakedone (node:_tls_wrap:856:12)
info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
root@ubuntu/vue# npm install
npm error code EUNSUPPORTEDPROTOCOL
npm error Unsupported URL Type "workspace:": workspace:*
npm error A complete log of this run can be found in: /root/.npm/_logs/2025-01-28T08_57_03_211Z-debug-0.log
root@ubuntu/vue#
root@ubuntu# snap install vue
vue 3.3.0 from Richard Rath (rcrath) installed
root@ubuntu# vue create my-project
Picked up _JAVA_OPTIONS: -Dswing.defaultlaf=com.sun.java.swing.plaf.gtk.GTKLookAndFeel
openjdk version "1.8.0_242"
OpenJDK Runtime Environment (build 1.8.0_242-8u242-b08-0ubuntu3~18.04-b08)
OpenJDK 64-Bit Server VM (build 25.242-b08, mixed mode)
Error: Unable to access jarfile /snap/vue/1/jar/vue-1.0-SNAPSHOT.jar
解决
替换镜像源
4.3. npm verbose stack HttpErrorGeneral: 400 Bad Request
现象
root@ubuntu# npm config set proxy https://mirrors.huaweicloud.com/repository/npm/
root@ubuntu# npm config set https-proxy https://mirrors.huaweicloud.com/repository/npm/
root@ubuntu# npm config set registry https://mirrors.huaweicloud.com/repository/npm/
root@ubuntu# npm install -g @vue/cli --verbose
npm verbose cli /usr/bin/node /usr/bin/npm
npm info using npm@10.8.2
npm info using node@v18.20.6
npm verbose title npm install @vue/cli
npm verbose argv "install" "--global" "@vue/cli" "--loglevel" "verbose"
npm verbose logfile logs-max:10 dir:/root/.npm/_logs/2025-02-06T07_44_31_500Z-
npm verbose logfile /root/.npm/_logs/2025-02-06T07_44_31_500Z-debug-0.log
npm http fetch GET 400 https://mirrors.huaweicloud.com/repository/npm/@vue%2fcli 293ms (cache skip)
npm verbose stack HttpErrorGeneral: 400 Bad Request - GET https://mirrors.huaweicloud.com/repository/npm/@vue%2fcli
npm verbose stack at /usr/lib/node_modules/npm/node_modules/npm-registry-fetch/lib/check-response.js:95:15
npm verbose stack at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
npm verbose stack at async RegistryFetcher.packument (/usr/lib/node_modules/npm/node_modules/pacote/lib/registry.js:90:19)
npm verbose stack at async RegistryFetcher.manifest (/usr/lib/node_modules/npm/node_modules/pacote/lib/registry.js:128:23)
npm verbose stack at async #fetchManifest (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1199:20)
npm verbose stack at async #nodeFromEdge (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1037:19)
npm verbose stack at async #buildDepStep (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:901:11)
npm verbose stack at async Arborist.buildIdealTree (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:181:7)
npm verbose stack at async Arborist.reify (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:131:5)
npm verbose stack at async Install.exec (/usr/lib/node_modules/npm/lib/commands/install.js:150:5)
npm verbose statusCode 400
npm verbose pkgid @vue/cli@*
npm error code E400
npm error 400 Bad Request - GET https://mirrors.huaweicloud.com/repository/npm/@vue%2fcli
npm verbose os Linux 5.4.0-204-generic
npm verbose node v18.20.6
npm verbose npm v10.8.2
npm verbose exit 1
npm verbose code 1
npm error A complete log of this run can be found in: /root/.npm/_logs/2025-02-06T07_44_31_500Z-debug-0.log
解决
root@ubuntu# npm config set proxy null
root@ubuntu# npm config set https-proxy null
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签