在Linux环境下运行vue项目

628 阅读2分钟
  1. 使用vscode插件Remote - SSH 连接访问Linux服务器
  2. Linux安装nodejs
  3. 安装cnpm国内资源镜像
  4. 上传vue项目
  5. 在Linux上解压vue项目
  6. 下载项目所需依赖包
  7. 修改vue-cli-service 的权限
  8. 启动项目npm run serve
  9. 解决vue-cli热刷新失效的问题

1. 使用vscode插件Remote - SSH 连接访问Linux服务器

在VSCode中安装remote ssh 插件

打开远程资源管理器,添加配置信息

最后,进行连接即可

2. Linux安装nodejs

wget https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz // 下载

tar xf node-v16.13.1-linux-x64.tar.xz // 解压

cd node-v16.13.1-linux-x64

cp /etc/profile /etc/profile.bak // 修改前备份一下

vim /etc/profile
在最下面添加 export PATH=$PATH: 后面跟上 node 下 bin 目录的路径:
export PATH=$PATH:/root/vue/node-v16.13.1-linux-x64/bin

**source /etc/profile 立即生效**

**node -v 查看node版本**

npm -v 查看npm版本

3.安装cnpm国内资源镜像

**npm install -g cnpm --registry=http://registry.npm.taobao.org**

4.上传vue项目

打开cmd 进入项目压缩包所在目录,输入sftp 输出如下结果即可进行下一步

**sftp songyh@47.102.153.128**

**输入密码**

**put dist.zip**

5. 在Linux上解压vue项目

**mkdir h5 // 新建文件夹**

**cd h5**

**unzip /home/yuhua/dist.zip // 解压项目文件 **

通过vscode远程查看刚解压的vue项目

6. 下载项目所需依赖包

因为环境不同,对应依赖包不同,先将旧的node_modules文件夹删除

在项目根目录打开终端

**cnpm i // 下载依赖包**

7. 修改vue-cli-service 的权限

执行npm run serve 时提示Permission denied 

**ll vue-cli-service // 查看该文件**

发现权限不够

**chmod +x vue-cli-service // 修改权限**

8. 启动项目npm run serve

**npm run serve**

9. 解决vue-cli热刷新失效的问题

当我们修改代码时,发现vue不会自动刷新,需要手动重启服务,非常麻烦,需要在终端输入如下代码已解决热刷新失效的问题

**echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && so sysctl -p**