Vue.js Webpack 模板使用指南

1. 项目的目录结构及介绍

vuejs-templates/webpack/
├── build/
│   ├── build.js
│   ├── check-versions.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config/
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── App.vue
│   └── main.js
├── static/
├── .babelrc
├── .editorconfig
├── .gitignore
├── index.html
├── package.json
└── README.md

目录结构说明

• build/: 包含 Webpack 构建相关的配置文件。

  • build.js: 生产环境构建脚本。
  • check-versions.js: 检查 Node.js 和 npm 版本。
  • utils.js: 工具函数。
  • vue-loader.conf.js: Vue Loader 配置。
  • webpack.base.conf.js: Webpack 基础配置。
  • webpack.dev.conf.js: Webpack 开发环境配置。
  • webpack.prod.conf.js: Webpack 生产环境配置。

• config/: 项目配置文件。

  • dev.env.js: 开发环境变量。
  • index.js: 主要配置文件。
  • prod.env.js: 生产环境变量。

• src/: 源代码目录。

  • assets/: 静态资源文件。
  • components/: Vue 组件。
  • router/: 路由配置。
  • App.vue: 根组件。
  • main.js: 入口文件。

• static/: 静态文件目录。

• .babelrc: Babel 配置文件。

• .editorconfig: 编辑器配置文件。

• .gitignore: Git 忽略文件配置。

• index.html: 主页模板。

• package.json: 项目依赖和脚本配置。

• README.md: 项目说明文档。

2. 项目的启动文件介绍

入口文件：src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

说明

• 引入 Vue 和 App 组件。
• 引入路由配置。
• 创建 Vue 实例，挂载到 #app 元素上。

3. 项目的配置文件介绍

Webpack 配置文件：build/webpack.base.conf.js

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',