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

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

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

node.js
安装VUE
第一个工程
Troubleshooting
- 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
- Error: Cannot find module 'xxx'

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

安装npm †[edit]

npm install -g cnpm

如果网速太慢的话，可以如下切换到淘宝的镜像

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

下面的命令可以切换回原镜像（安装一些package不容易报错）

npm config set registry https://registry.npmjs.org

安装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' 不是内部或外部命令，也不是可运行的程序或批处理文件。

浏览器启动

发布 †[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]

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 †[edit]

执行命令：

npm install webpack-dev-server;

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

执行命令：

npm install

コメント：