+Vue+环境搭建のバックアップ(No.15) - Free Flying

[ トップ ] [ 新規 | 一覧 | 検索 | 最終更新 | ヘルプ | ログイン ]

※前提条件：本情報はVue 2.0を基づいて説明してる

node.js †[edit]

下载 †[edit]

VUE的使用需要用到node.js，下载地址：

https://nodejs.org/en/download/

安装node †[edit]

下载 node-v16.14.2-x64.msi 后安装，结束收cmd输入命令

node -v
//v16.14.2

安装cnpm †[edit]

npm install -g cnpm

下面的命令用于，安装单个包时，特别指定镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org;
//2022/04/12现在这个镜像速度也不行了

npm设置镜像/代理 †[edit]

代理 †[edit]

一般直接删掉代理即可

查看当前代理

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

镜像源 †[edit]

可以解决下载网速慢的问题

查看当前镜像源

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模板 †[edit]

输入以下命令进行安装

npm install webpack -g
npm install --global webpack-cli

安装VUE †[edit]

cnpm install --global vue-cli

//npm中安装指定的版本号，格式为 ‘包名@版本号’
//npm install --save 包名称@版本号
npm install --save router@2.0.7

验证是否安装成功

vue
//输出下面vue信息，则安装成功

查看安装的版本号

vue -V

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]

第一个工程 †[edit]

创建第一个工程 †[edit]

vue init webpack my-project

创建完成后文件夹的构成

安装依赖 †[edit]

cnpm install

运行 †[edit]

启动运行

npm run dev

如果报下面的错误，则是因为上一步的cnpm install命令没有执行、或者没有执行成功

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。
执行命令： npm install webpack-dev-server

浏览器启动

发布 †[edit]

# build for production with minification

npm run build

# build for production and view the bundle analyzer report

npm run build --report

如果API涉及到跨域、或者是API服务器分离的话，可以参考 UrlRewirte 来设置 IIS 实现URL的重定位

这里请注意 IIS 部署 Vue 项目时，有个注意的问题： F5刷新界面报 404

https://blog.csdn.net/IT_laohu/article/details/124735538

启动的服务器无法被局域网访问问题 †[edit]

下面的host由“localhost”改为IP地址。修改后即便在本机也要使用IP地址访问。

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 †[edit]

清除缓存也是解决安装失败和速度慢的常见方法。 †[edit]

以下是清除缓存的步骤：

npm cache clean --force

ETIMEDOUT †[edit]

问题的现象：使用npm安装任何包，安装半天进度条一动不动最后超时错误。

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 †[edit]

原因是淘宝镜像过期了

其实，早在 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' 不是内部或外部命令，也不是可运行的程序 †[edit]

执行命令：

npm install webpack-dev-server;

Error: Cannot find module 'xxx' †[edit]

执行命令：

npm install

コメント：