Linux 下的 Laravel-vue 环境

Author Avatar
yyq 2020-04-19 11:47:46
  • 二维码


    关于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


上一篇 返回列表 下一篇

发表评论

Tips:评论内容请文明用语