webpack4+vue+vue-router开发环境搭建（非vue-cli）

矫情吗；* 2022-05-15 07:51 207阅读 0赞

**1.使用到的环境和插件**

"css-loader": "^1.0.0",  
    "html-webpack-plugin": "^3.2.0",  
    "mini-css-extract-plugin": "^0.4.2",  
    "style-loader": "^0.22.1",  
    "webpack": "^4.17.1",  
    "webpack-cli": "^3.1.0"  
    "babel-core": "^6.26.3",  
    "babel-loader": "^7.1.5",  
    "vue": "^2.5.17",  
    "vue-loader": "^15.4.0",  
    "vue-router": "^3.0.1",  
    "vue-template-compiler": "^2.5.17"

使用nginx服务器（由phpstudy配置）

**2.安装插件**

1）全局安装webpack

npm install -g webpack webpack-cli

2)当前目录安装webpack

npm install webpack webpack-cli --save-dev

3)安装style-loader和css-loader用于解析css文件

npm install style-loader css-loader --save-dev

4)安装mini-css-extract-plugin用于打包css文件

npm install mini-css-extract-plugin --save-dev

5）安装babel-core和babel-loader用于转译ES6代码为浏览器可读代码

npm install babel-core babel-loader

6）安装html-webpack-plugin用于解析和打包html文件

npm install html-webpack-plugin --save-dev

7）安装vue和vue-router相关插件，由于最终代码需要vue支持，所以安装为最终依赖

npm install vue vue-loader vue-router vue-template-compiler

8）生成package.json文件

npm -y init

{
      "name": "vuetest",
      "version": "1.0.0",
      "main": "index.js",
      "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "vue": "^2.5.17",
        "vue-loader": "^15.4.1",
        "vue-router": "^3.0.1",
        "vue-template-compiler": "^2.5.17"
      },
      "devDependencies": {
        "css-loader": "^1.0.0",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.4.2",
        "style-loader": "^0.22.1",
        "webpack": "^4.17.1",
        "webpack-cli": "^3.1.0"
      },
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "description": ""
    }

**3.其他文件目录**

![70][]

src:源码目录

src/vue:vue模板源码文件目录

src/main.js:打包入口文件

src/main.css:样式源码文件

src/index.html:页面入口

config/webpack.dev.js:打包配置文件

dist/：打包输出目录

相关代码：

config/webpack.dev.js:

src/main.js:

import Css from './main.css'; //引入css要从打包后的路径开始引入
    import Vue from 'vue'; //npm 安装过vue.可以直接import
    import VueRouter from 'vue-router'; //引入插件
    Vue.use(VueRouter); //安装插件
    
    import Foo from './vue/foo.vue';
    import Bar from './vue/bar.vue';
    
    // 定义路由
    const routes = [
    	{ name: 'default',path: '',redirect: {name: 'foo'}}, // 设置默认路由
        { name: 'foo',path: '/foo', component: Foo },
        { name: 'bar',path: '/bar', component: Bar }
    ]
    
    // 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })
    
    // 创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

src/index.html:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <h1>Hello App!</h1>
            <p>
                
                
                
                <router-link to="/foo">Go to Foo</router-link>
                <router-link to="/bar">Go to Bar</router-link>
            </p>
            
            
            <router-view></router-view>
        </div>
    </body>
    
    </html>

src/main.css:

h1 {
    	color: red;
    }

src/vue/bar.vue:

src/foo.vue:

修改package.json的配置在scripts对象中添加一行

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --config=config/webpack.dev.js"
      },

**4.打包输出**

运行

npm run dev

![70 1][]

dist目录多了相关文件：

![70 2][]

开启服务器打开网页：

![70 3][]

[70]: /images/20220515/c906f8bddfbd488fb4d2e48ff9472740.png
[70 1]: /images/20220515/6c2234b8400e4f3f8d705a7d94e7b479.png
[70 2]: /images/20220515/4c3bb54b3e3d46bdb301a331f4758a54.png
[70 3]: /images/20220515/f7495d08486e44e5849fa0feeaf8ca3c.png