Ubuntu安装node.js（自带npm）

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
apt install -y nodejs

查看版本

node -v

npm依赖源问题

服务器在外边，速度慢，有两种解决方法。
一、安装cnpm，以后使用cnpm代替npm（其实就是使用淘宝源的npm）：

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

二、修改npm的镜像源为淘宝源：

npm config set registry https://registry.npm.taobao.org

查看镜像源：

npm config get registry

重置回官方镜像源：

npm config set registry https://registry.npmjs.org/

在laravel框架中使用vue作为前端

一、创建laravel项目

composer create-project laravel/laravel --prefer-dist my-frist-project

二、安装必要的laravel拓展包。laravel/ui包含了必要的用户认证模块、vue/react/bootstrap等前端基本模板。

composer require laravel/ui

三、从laravel/ui中提取vue所必须的基本文件，嵌入到laravel项目中。

  1. 确保文件夹/resources/js/是存在的，不存在请新建；
  2. 确保/package.json是存在的，没有请新建，初始内容为：
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    }
}
  1. 利用laravel自带的ui模板生成相关文件：
php artisan ui vue
# php artisan ui bootstrap  # 其实上一句会自动引入bootstrap （默认5.x)，此句无用

完成上述步骤之后，会影响以下文件：

resources/js/compoenets/ExampleComponent.vue  # vue单文件示例
resources/js/app.js        # 自动填充了内容
resources/js/bootstrap.js
resources/sass/*
vite.config.js             # 构建vue所需的vite配置文件
package.json               # npm配置

四、使用npm安装前端依赖包（将针对配置文件/package.json逐个安装）。

npm install

五、在前端代码中引入vite维护的js和css。

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

六、编译vue并在开发模式下启动一个调试服务器
这种情况下，需要确保服务器开放了5173端口作为开发环境的前端的入口。

npm run dev

七、编译前端生成静态文件，这种情况下直接使用laravel模版即可，无需开放其他端口

npm run build

🤪可能会遇到的错误

缺少依赖包

failed to load config from /app/vite.config.js
error when starting dev server:
Error: Cannot find module 'laravel-vite-plugin'

解决方法：

npm i -D laravel-vite-plugin axios lodash

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: NodeJSvueUbuntu