![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2024-05-09T10:05:06+08:00","default:Admin","Admin") #author("2024-05-09T10:07:26+08:00","default:Admin","Admin") [[Vue]] &color(red){※前提条件：本情報はVue 2.0を基づいて説明してる}; #contents * node.js [#rffe4ed3] ** 下载 [#he585c2d] VUE的使用需要用到node.js，下载地址： https://nodejs.org/en/download/ ** 安装node [#x97f23a7] &color(red){注意：};最新版本的 v20 他对里面的类库版本依赖太强了。以下的文章在node16以上估计都用不了 &color(red){注意：};最新版本的 v20 他对里面的类库版本依赖太强了。以下的文章在nodejs16以上估计都用不了 下载 node-v16.14.2-x64.msi 后安装，结束收cmd输入命令 node -v //v16.14.2 查看nodejs缓存路径的命令 *** 常用命令 [#u51a0778] 查看/设置nodejs缓存路径 npm config get cache npm config set cache "E:\nodejs\node_cache" 查看nodejs默认下载安装包路径的命令 查看/设置nodejs默认下载安装包路径 npm config get prefix npm config set prefix "E:\nodejs\node_global" 查看全局包 npm list -global ** 安装cnpm [#g5b7ed9e] npm install -g cnpm 下面的命令用于，安装单个包时，特别指定镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org; //2022/04/12现在这个镜像速度也不行了 ** npm设置镜像/代理 [#xf8e4808] *** 代理 [#oe966262] 一般直接删掉代理即可 查看当前代理 npm config get proxy npm config get https-proxy 设置代理 npm config set proxy http://server:port npm config set https-proxy http://server:port 删除代理 npm config set proxy null npm config set https-proxy null *** 镜像源 [#xde55cd8] 可以解决下载网速慢的问题 查看当前镜像源 npm get registry 如果网速太慢的话，可以如下切换到淘宝的镜像 使用下面命令切换安装镜像 【废】npm config set registry https://registry.npm.taobao.org npm config set registry https://registry.npmmirror.org 下面的命令可以切换回原镜像（安装一些package不容易报错） npm config set registry https://registry.npmjs.org * 安装webpack模板 [#zcf0442b] 输入以下命令进行安装 npm install webpack -g npm install --global webpack-cli * 安装VUE [#lb7fea9b] cnpm install --global vue-cli //npm中安装指定的版本号，格式为 ‘包名@版本号’ //npm install --save 包名称@版本号 npm install --save router@2.0.7 验证是否安装成功 vue //输出下面vue信息，则安装成功 查看安装的版本号 vue -V #codeprettify{{ C:\Users\Administrator>vue Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: init generate a new project from a template list list available official templates build prototype a new project create (for v3 warning only) help [cmd] display help for [cmd] }} * 第一个工程 [#oebf9646] ** 创建第一个工程 [#k10a8685] vue init webpack my-project &ref(vue_install6.png); 创建完成后文件夹的构成 &ref(vue_install7.png); ** 安装依赖 [#d043dd92] &color(red){注意：};需要将控制台的路径切换到project的路径下，再执行下面的命令 cnpm install ** 运行 [#r4031902] 启动运行 npm run dev 如果报下面的错误，则是因为上一步的cnpm install命令没有执行、或者没有执行成功 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。 执行命令： npm install webpack-dev-server &ref(vue_install8.png); 浏览器启动 &ref(vue_install9.png); ** 发布 [#qa5376e3] # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 如果API涉及到跨域、或者是API服务器分离的话，可以参考 [[+IIS+UrlRewirte]] 来设置 IIS 实现URL的重定位 这里请注意 IIS 部署 Vue 项目时，有个注意的问题： F5刷新界面报 404 https://blog.csdn.net/IT_laohu/article/details/124735538 ** 启动的服务器无法被局域网访问问题 [#j6e100e8] 下面的host由“localhost”改为IP地址。修改后即便在本机也要使用IP地址访问。 #codeprettify{{ module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settings host: '192.168.0.60', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, }} * Troubleshooting [#x232ffde] ** 清除缓存也是解决安装失败和速度慢的常见方法。 [#y39b04e0] 以下是清除缓存的步骤： npm cache clean --force ** ETIMEDOUT [#q69ec535] 问题的现象：使用npm安装任何包，安装半天进度条一动不动最后超时错误。 #codeprettify{{ PS F:\DataViewer\SINODataViewer\WebClient> npm install node-sass npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.npm.taobao.org/node-sass failed, reason: connect ETIMEDOUT 93.184.216.34:8080 npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config' }} 原因：下载的源地址无法访问，需要更换一个下载的镜像 下面的命令切换到taobao的镜像的地址 npm config set registry http://registry.npm.taobao.com 方式三、如果上述两步的操作并没有解决问题，那么可试下重启一下电脑： 此时再输入命令 npm i node-sass，一般就能解决问题； ** request to https://registry.npm.taobao.org failed, reason certificate has expired [#xb0537e5] 原因是淘宝镜像过期了 其实，早在 2021 年，淘宝就发文称，npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com。 旧域名也将于 2022 年 5 月 31 日停止服务（不过，直到今天 HTTPS 证书到期才真正不能用了） 解决方法 + 查看当前的npm镜像设置：npm config list + 清空缓存：npm cache clean --force + 然后修改镜像即可：npm config set registry https://registry.npmmirror.com ** 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 [#kd0cc7c7] 执行命令： npm install webpack-dev-server; ** node与node-sass版本不匹配解决方法 [#v066111b] 出现node版本不匹配问题时 + 删除旧的"node_modules"文件夹； + 修改"package.json"，在"devDependencies"中增加"node": "^20.13.0"依赖； + npm install -s node-sass@4.14.1; + npm install --save --legacy-peer-deps; + npm run dev ** Error: Cannot find module 'xxx' [#l0e6f6a9] 执行命令： npm install ** 使用了高版本的node.js之后随之而来有可能的问题 [#raf280f1] ERESOLVE与npm@7有关的问题很常见，因为npm7.x对某些事情比npm6.x更严格。通常，最简单的解决方法是将–legacy-peer-deps标志传递给npm(e.g.，npm i --legacy-peer-deps），或者使用npm@6。 如果这不能立即起作用，也许可以先删除node_modules和package-lock.json。它们将被重新创建。 ***版本过高的问题 [#q5126889] 降级npm到6版本 或者 使用npx指定npm的版本 npx -p npm@6 npm i --legacy-peer-deps 使用--force或--legacy-peer-deps可解决这种情况。 --force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。 --legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。 npm install --legacy-peer-deps *** webpack 的问题 [#w87a5c0c] 卸载当前的webpack ，然后重新指定一个全局版本。 npm uninstall webpack npm install webpack@4.4.0 -g 此问题，第一种方式是全局安装Webpack和webpack-dev-server, 在命令行中输入以下命令： npm install webpack webpack-cli webpack-dev-server -g 如果您已经全局安装Webpack和webpack-dev-server，可以采用第二种方式，安装项目中的webpack和webpack-dev-server。在项目根目录下运行以下命令： npm install webpack webpack-cli webpack-dev-server --save-dev #hr(); コメント： #comment_kcaptcha
