webpack vue配置使用不包括解析vue文件

最新推荐文章于 2021-12-15 14:44:23 发布

tianmeng1999

最新推荐文章于 2021-12-15 14:44:23 发布

阅读量468

点赞数

分类专栏： webpack vue

本文链接：https://blog.csdn.net/weixin_42448623/article/details/108116016

版权

vue 同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

webpack

16 篇文章 1 订阅

订阅专栏

文章目录

目录结构

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">{{msg}}</div>
    <script src="./dist/build.js"></script>
</body>
</html>

main.js

// 使用vue

import Vue from 'vue'

new Vue({
    el:'#app',
    data:{
        msg:'webpack 使用 vue'
    }
})

这个时候打包会错
在这里插入图片描述
说vue使用的版本不对 retime-only 中template不可用
导入指定的版本
配置

resolve:{
    alias:{ // alias（别名）
        // 默认导入的是  vue/dist/vue.runtime.js
        // 用处 当导入vue的时候(import Vue from 'vue') 的时候  相当于导入 'vue/dist/vue.esm.js'  esm=>ESModule
        'vue$':'vue/dist/vue.esm.js'  
    }  
}

安装使用

安装

npm i vue -s

webpack 配置

const path = require('path')

module.exports = {
    entry:'./src/main.js',
    output:{
        path: path.join(__dirname,'dist'),
        filename: 'build.js'
    },
    resolve:{
        alias:{ // alias（别名）
            // 默认导入的是  vue/dist/vue.runtime.js
            // 用处 当导入vue的时候(import Vue from 'vue') 的时候  相当于导入 'vue/dist/vue.esm.js'  esm=>ESModule
            'vue$':'vue/dist/vue.esm.js'  
        }  
    }
}

package.json

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11"
  }
}