Linux 下的 Laravel-vue 环境
关于Linux 下的 Laravel-vue 环境的搭建,现总结内容如下:
No1: 安装nodejs
step1:在linux下安装nodejs,版本为v10.15.3,官方可直接下载:https://nodejs.org/en/download/,选择合适的版本很重要,少走弯路
step2:上传至服务器解压后可直接使用,移动到指定目录,一般放置/usr/local/nodejs,同时将目录新增个全局变量,方便执行npm命令操作,在/etc/profile内的PATH后添加 :/usr/local/nodejs/bin, 注意冒号
step3:cd至项目的根目录下,准备执行npm install。此时需要操作下以下命令,清理下之前数据
命令1:rm -rf node_modules (木有这个目录就算了)
命令2:rm package-lock.json
此处着重说明下package.json的脚本配置,在windows与linux上存在的差异性,windows上示例如下
"scripts": {
"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
而在linux上示例如下
"scripts": {
"dev": "node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
主要在于对cross-env的支持,该组件只能在windows上运行,解决跨平台环境变量,而linux不支持,会报错!!
命令3:npm cache clear --force
命令4:npm install
此处在执行时会报个权限的错误:npm ERR! Error: EACCES: permission denied,chmod -R 777都木有用,找了下度娘,使用了这个命令成功执行:npm install --unsafe-perm=true --allow-root --save-dev grunt,大概意思是指定root运行,但我是root用户执行的,有点莫名其妙。
No2:第一步完成后应该是可以直接运行npm run dev了,用于编译vue前端资源。npm run watch-poll命令是用于监控前端资源是否有更新,如果不是频繁编辑css,而且性能又不够,还是不开启监控了,npm run dev就OK