0. Problems
Running the vue project under mac m1, an error is reported
Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64)
or
npm ERR! gyp ERR! command "/opt/homebrew/Cellar/nvm/0.39.1_1/versions/node/v16.14.2/bin/node" "/Library/project/study/vue/every_day_pages_saber/node_modules/node-sass/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Library/project/study/vue/every_day_pages_saber/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
This problem is caused by the current node version is too high, and the adapted node-sass does not support the arm architecture, so there are two solutions:
- Lower the node version, or find the node version corresponding to node-sass that is adapted to the arm architecture
- Looking for an alternative to node-sass
1. Replacing node-sass with sass
First of all, I will introduce the easiest way to you. Before introducing it, you must know what node-sass does. In short, it is a tool for compiling sass syntax, so that sass syntax becomes CSS syntax that browsers can recognize.
Note that the sass syntax here is not the sass multi-tenant architecture that we often say in our architecture. Rather, it is a front-end syntax for declarative styles.
node-sass can be replaced by sass, and the implementation is also very simple:
1. Just delete the package.jsonfile directly "node-sass": "^6.0.1"(the version number here may be inconsistent, just find the node-sass keyword)
2. Then execute the following command in the project root directory and replace it with sass
npm uninstall node sass
npm install sass
npm install
3. Then you can run the project
npm run serve
At the same time, it can also be package.jsonfound in , there is already one more sassdependency
"sass": "^1.50.1"
2. Use nvm to lower the node version
1. We directly use homebrew to install nvm. If homebrew is not installed, install homebrew first
brew install nvm
2. Modify environment variables
vim ~/.zshrc
Modify the content
# 这里是你自己的nvm安装路径，使用homebrew安装的都在如下路径下，只是版本不一致
export NVM_DIR="/opt/homebrew/Cellar/nvm/0.39.1_1"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"
3. Reload environment variables
source ~/.zshrc
3. My current node version is node16, reduce it to node14, install node14
nvm i v14
4. Check the node version to see if the installation is successful
node -v
If the previous version is still displayed, execute the version switching command under the project
nvm use v14
If it still shows the version between, then restart the computer
4. Clear the dependencies installed before and execute them in the project root directory
rm -rf node_modules
5. Reinstall dependencies
npm install
If the installation fails, add the schema specification
npm install --target_arch=x64
6. Rerun the project
npm run serve
execution succeed
