Oliver's Blog

Vue开发环境搭建

  • Jul 01, 2021

安装Node.js

安装完成后，查看版本确认安装成功

node -v

配置npm镜像

npm config set registry https://registry.npmmirror.com

安装Vue CLI

npm install -g @vue/cli

创建项目

以管理员身份启动PowerShell，设置脚本执行权限

set-ExecutionPolicy RemoteSigned

运行创建项目脚本

vue create language-trainer-vue

项目关联GitHub库

创建出来的项目已经是一个Git仓库，把Git仓库关联远端即可

git remote add origin git@github.com:x/y.git
git push -u origin master

命令行启动项目

npm run serve

WebStorm启动项目

配置Run/Debug Configurations，添加一个npm配置

image-20221002070055890

添加后点击Run选项启动项目即可

WebStorm开启Debug模式

打开Settings -> Tools -> Web Browsers and Preview

选中调试使用的Chrome浏览器，点击编辑

增加--remote-allow-origins=*

配置Run/Debug Configurations，添加一个JavaScript Debug配置，URL填写为项目的访问地址

启动项目后，使用Debug选项启动对应的JavaScript Debug，会自动打开一个浏览器，使用此浏览器访问系统即可响应WebStorm设置的断点

另外一种方式，在启动项目后，Ctrl+Shift+鼠标左键点击地址，WebStorm会自动配置一个没有名称的JavaScript Debug，并使用Debug选项开启

image-20221002070311770

后端代理配置

vue.config.js增加以下配置

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

假设Vue-CLI运行在http://localhost:8081，访问http://localhost:8081/api/test将代理到http://localhost:8080/test

Search