新手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鏡像源：http://www.rzrgm.cn/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

解決