0
点赞
收藏
分享

微信扫一扫

Node.js webpack中导入vue的三种方法

在webpack 中使用 Vue:
安装 ​​​vue​​​ 模块 ​​npm i vue -S​​ 注意: 在 webpack 中, 使用 import Vue from ‘vue’ 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供 像网页中那样的使用方式;

第一种导入方法:

  1. 找项目根目录中的node_modules 的文件夹
    Node.js webpack中导入vue的三种方法_配置文件
  2. 在 node_modules 中 根据包名,找对应的 vue 文件夹
    Node.js webpack中导入vue的三种方法_vue.js_02
  3. 在 vue 文件夹中,找 一个叫做 package.json 的包配置文件
    Node.js webpack中导入vue的三种方法_html_03
  4. 在 package.json 文件中,查找 一个 main 属性【main属性指定了这个包在被加载时候,的入口文件】
    Node.js webpack中导入vue的三种方法_vue.js_04
    Node.js webpack中导入vue的三种方法_配置文件_05
  5. 修改main属性入口,把​​"main": "dist/vue.runtime.common.js"​​, 修改成 ​​"main": "dist/vue.js"​​,即可。

第二种导入方法:

在项目的main.js文件中直接引入vue所在的路径
​​​import Vue from '../node_modules/vue/dist/vue.js'​

第三种导入方法:

main.js文件

import Vue from 'vue' // 调用 vue 模块修改webpack.config.js配置文件使导入的模块指向vue文件

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'vvcat'
  }
})

webpack.config.js配置文件

var path = require('path')

var htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'), 
  output: { 
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js' 
  },
  plugins: [ 
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), 
      filename: 'index.html' 
    })
  ],
  module: { 
    rules: [ 
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的 第三方 loader 规则
    ]},
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
              "vue$": "vue/dist/vue.js"
        }
    }
}

在webpack.config.js配置文件中通过 ​​resolve​​ 修改 Vue 被导入时候的包的路径。

举报

相关推荐

0 条评论