vue目录结构&&webpack配置

最新推荐文章于 2025-02-11 23:29:24 发布

致可乐

最新推荐文章于 2025-02-11 23:29:24 发布

阅读量1.5k

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/ling_xy/article/details/119272183

版权

笔记专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了Vue项目的目录结构，包括build、src、assets、components等关键部分，并讲解了如何创建简化版Vue项目，重点阐述了Webpack的配置，包括修改默认端口号和主机名称的方法，以及Webpack作为前端资源打包工具的作用和基本使用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、vue目录结构

完整版中：

build文件：打包之后的项目文件

config：配置目录（包括端口之类）

node_modules：依赖包文件

src：开发目录文件【开发只使用这个】
包括：

assets：放置一些图片（如logo）
components：放置组件文件。可以不用
App.vue：项目入口文件（可以将组件直接写在这里，而不使用components目录）
（整个项目的主模板,通过webpack打包后会把整个文件放到index.html中，生成到id="app"中）
main.js：项目的核心文件。整个项目加载从这里开始

static：静态资源目录文件（本地图片，字体，css等非服务端）

test：初始测试目录，可删除

index.html：首页入口文件（可以加一些meta信息或代码统计之类）

<body>
    <div id="app"></div>   //渲染到它里面去
    <script src="/dist/build.js"></script>   //APP.vue打包后的文件路径
  </body>

package.json：项目配置文件

README.md：说明文档

webpack.config.js：webpack配置文件

1.创建项目（简化版）

vue init webpack-simple name
在这里插入图片描述
安装依赖
cnpm install

在这里插入图片描述
简单版的配置全在webpack.config.js中（完整版没有这个文件，在config中配置）

@：指 src 目录

2.配置webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',  //进入文件

  //输出配置（打包）
  //__dirname为当前目录 
  output: {
    path: path.resolve(__dirname, './dist'), //在当前目录中生成dist文件
    publicPath: '/dist/', //定位到dist目录之下
    filename: 'build.js'  //输出文件名
  },

  //解析模块
  module: {
    //配置解析规则
    rules: [  //加载什么类型，配置什么类型
      {
        test: /\.css$/,  //判断文件类型 (当加载文件为.css文件时)
        use: [ 
          //使用这两个组件进行加载
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,  //加载文件为vue类型
        loader: 'vue-loader',  //使用它解析加载
        //可以不配
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',  //使用node_modules中的babel-loader
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',  //使用文件加载
        options: {
          name: '[name].[ext]?[hash]'  //解析规则
        }
      }
    ]
  },

  //定位当前文件
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@':path.resolve(__dirname+"/src")      //自己配置(node.js写法)
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

  //配置服务端(可以配置host和port)
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}
......

3.修改默认端口号及主机名称

如果想要修改默认端口号及主机名称，可以在webpack.congig.js中，添加host和port

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,

	host:
	port:
  },

二、webpack配置

1.什么是webpack

一个前端资源加载的打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的浏览器可识别的静态资源。减少页面请求
在这里插入图片描述

2.举例

1.使用 cnpm 安装 webpack

在文件夹webpack中：（或cmd全局）
cnpm install webpack -g （cnpm i -g webpack）

2.创建app.js文件
在这里插入图片描述

document.write("Hello World!");

3.新建文件index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/build/bundle.js"></script>
</body>
</html>

4.创建webpack.config.js配置文件

const path = require('path');

module.exports ={
    entry:'app/js',
    output:{
        path: path.resolve(__dirname+'/build'),
        filename:'bundle.js'
    }
}