Vue + Node + Webpack 环境搭建教程

本文详细讲解如何搭建 Vue + Node + Webpack 环境，以及相关的配置和注意事项。本教程中使用的框架版本如下：

Vue.js：2.x
Node.js：8.x
Webpack：3.x

1. 安装 Node.js

在开始搭建前，首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。可以前往 Node.js 官网下载安装最新版本的 Node.js。

2. 初始化项目

我们使用 Vue-cli 脚手架工具来初始化项目，执行以下命令：

npm install -g vue-cli
vue init webpack my-project

其中 my-project 是你的项目名称。执行上述命令后会有一系列的交互式问题，包括项目名称、描述、作者、选择要使用的 Vue 版本等。选择对应的选项即可。

3. 安装 npm 包

进入项目目录执行以下命令安装依赖：

cd my-project
npm install

4. 配置 Webpack

1. 添加 webpack-dev-server

webpack-dev-server 是一个静态文件服务器，可以用来预览我们的项目。执行以下命令安装：

npm install --save-dev webpack-dev-server

接下来需要在 webpack.config.js 文件中添加相关的配置：

// webpack.config.js

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    port: 8080,
    historyApiFallback: true
  }
}

contentBase：静态文件服务根目录
port：指定要监听的端口号
historyApiFallback：当访问不存在的路径时是否匹配到 index.html

2. 添加文件路径别名

在 webpack.config.js 文件中添加文件路径别名，可以方便快捷地引用相对路径下的文件。修改 resolve 属性的 alias 部分：

// webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
}

这里添加了一个别名 @，指向 src/ 目录。

3. 添加 loader

如果需要处理 .vue 文件，需要安装 vue-loader 和 vue-template-compiler，执行以下命令：

npm install --save-dev vue-loader vue-template-compiler

添加 vue-loader 和 VueLoaderPlugin 到 module.rules 中：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

如果需要处理 ES6 或者其他语言的源代码，则需要使用 babel 进行转换，安装以下包：

npm install --save-dev babel-loader @babel/core @babel/preset-env

babel-loader 是 Webpack 打包工具所需要的一个转译器，@babel/preset-env 是 Babel 的预设，它会告诉 Babel 需要进行哪些转换。

添加到 module.rules 中：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

4. 添加插件

在 webpack.config.js 文件中添加以下插件：

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

5. 配置 Node.js 服务

我们需要在项目中使用 Node.js 服务，需要安装一些必要的包。执行以下命令：

npm install --save express body-parser cors

这里我们用到了 express、body-parser、cors，分别代表 web 框架、处理 post 数据、跨域处理。

在项目根目录下，新建一个名为 server.js 的文件，添加以下代码：

// server.js

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()

// 跨域中间件
app.use(cors())

// 接口转发
app.use('/api', (req, res) => {
  // ...
})

// 解析 post 请求中的 json 数据
app.use(bodyParser.json())

// 监听端口
const port = 3000
app.listen(port, () => {
  console.log(`服务器启动成功：http://localhost:${port}`)
})

在 app.use('/api', (req, res) => {}) 的回调函数中编写接口的处理逻辑。下面是一个简单的例子：

// server.js

// 假设有一个 user 接口，根据传过来的 id 返回对应用户信息
app.use('/api/user/:id', (req, res) => {
  // 假设用户信息在数据库中
  const db = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
  ]

  // 获取请求中的 id
  const id = req.params.id
  const user = db.find(item => item.id === Number(id))

  // 返回用户信息
  res.json(user)
})

6. 添加示例说明

示例一：vue 组件调用 Node.js 接口

App.vue

<template>
  <div>
    <button @click="getUser">获取用户信息</button>
    <p>{{ user }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: ''
    }
  },
  methods: {
    getUser() {
      // 调用 user 接口
      const id = 2 // 假设要查询的用户 id 为 2
      this.$http.get(`/api/user/${id}`).then(response => {
        const user = response.data
        this.user = user ? user.name : ''
      })
    }
  }
}
</script>

main.js

import Vue from 'vue'
import Axios from 'axios'
import App from './App.vue'

// 配置 axios
Axios.defaults.baseURL = 'http://localhost:3000'
Vue.prototype.$http = Axios

new Vue({
  el: '#app',
  render: h => h(App)
})

示例二：Node.js 服务调用外部接口

server.js

const express = require('express')
const Axios = require('axios')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()

// 跨域中间件
app.use(cors())

// 接口转发
app.use('/api', async (req, res, next) => {
  try {
    const url = `https://api.example.com${req.originalUrl}` // 假设需要访问的外部接口地址为 https://api.example.com
    const response = await Axios(url, {
      method: req.method,
      headers: req.headers,
      data: req.body
    })
    res.status(response.status).json(response.data)
  } catch (error) {
    next(error)
  }
})

// 解析 post 请求中的 json 数据
app.use(bodyParser.json())

// 监听端口
const port = 3000
app.listen(port, () => {
  console.log(`服务器启动成功：http://localhost:${port}`)
})

这个示例中，我们将访问某个外部接口的请求转发到我们自己的 Node.js 服务中，目的是为了更好的控制请求，比如添加统一的请求头、鉴权信息等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue+node+webpack环境搭建教程 - Python技术站

vue+node+webpack环境搭建教程