在
Vue2中
使用Webpack时，以下是具体的
使用方法、配置及注意事项：
###
使用方法
直接
使用Webpack打包.
vue文件会报错，打包时会产生runtime-only和runtime-compiler两个版本，runtime-only代码中不可以有任何template，runtime-compiler代码中可以有template，因为compile可用于编译template。
使用npm本地安装
vue（npm install
vue --save），在JS入口文件中引用：
```javascript
// 导入
vue在node_modules中
import
Vue from '
vue';
//
使用vue
const app = new
Vue({
el: '#app',
data: {
message: 'hello
webpack'
}
});
```
### 配置
1. **指定runtime-compiler版本**：在
webpack.config.js中指定runtime-compiler版本
```javascript
module.exports = {
module: {
// 入口
// 全局变量 __dirname 保存现在的路径
entry: './src/main.js',
// 出口
output: {
},
// 配置resolve指定
vue版本
resolve: {
// alias - 别名
// 指向node_modules文件中
vue/dist/
vue.esm.js文件
// 因为
vue.esm.js中有runtime-compiler
alias: {
'
vue$': '
vue/dist/
vue.esm.js'
}
}
},
};
```
2. **配置
vue的loader**：安装
vue-loader和
vue-template-compiler，在
webpack.config.js中配置
```javascript
{
// 以xxxx结尾添加$
test: /\.
vue$/,
use: ['
vue-loader']
}
```
同时，在package.json中修改
vue-loader版本为^13.0.0（^表示13版本以上的版本，14版本开始需要安装插件，比较麻烦）：
```json
"
vue-loader": "^13.0.0"
```
3. **注入全局依赖**：可通过ProvidePlugin注入全局依赖（如jQuery）
```javascript
//
vue.config.js
const { defineConfig } = require('@
vue/cli-service');
const
webpack = require('
webpack');
module.exports = defineConfig({
configure
Webpack: {
plugins: [
new
webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
}
});
```
### 注意事项
1. **HTML文件中函数导入位置**：在index.html中，函数导入应该写在
vue挂载点的后面
```html
<body>
<div id="app">
<h3 v-text="message"></h3>
<p>{{getMsg()}}</p>
</div>
<script src="./dist/bundle.js"></script>
</body>
```
2. **常见问题及解决办法**
- **热更新（HMR）失效**：现象为修改代码后页面不自动刷新。解决办法是确保
webpack-dev-server版本兼容，并在配置中启用HMR：
```javascript
devServer: {
hot: true
}
```
- **生产环境构建体积过大**：优化方法是
使用splitChunks代码分割和启用TerserPlugin压缩代码
```javascript
optimization: {
splitChunks: {
chunks: 'all'
}
}
```
- **浏览器兼容性问题**：通过browserslist配置兼容范围（如IE 11），并添加@babel/preset-env和core-js实现Polyfill
```json
// package.json
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
```
本文介绍如何在Webpack环境中安装和配置Vue组件，包括使用.cnpm安装vue-loader和vue-template-compiler，以及在main.js中导入Vue模块。文章还详细解释了.vue组件的组成部分：template、script和style，并演示如何在项目中导入和使用这些组件。
扫一扫
1661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
