当前位置:网站首页 / 技术杂谈 / 正文

webpack搭建vue项目环境(完整版)

时间:2019年06月03日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 124次 | 评论 0

前言:经历了好几天的斗争才将vue环境部署起来,可以说是踩着坑过来的,这里分享一下

目录结构:

webpack搭建vue项目环境(完整版) 技术杂谈 第1张

第一步:建立名为vue_pre项目文件夹
第二步:打开shell,进入项目文件夹,执行 npm init, 创建出package.json文件,

如图:

webpack搭建vue项目环境(完整版) 技术杂谈 第2张

第三步: 安装webpack和vue

注:

没有全局安装的,执行npm install webpack webpack-cli vue -g

全局安装好的,执行 npm install webpack webpack-cli vue vue-loader

第四步:

执行 :

npm install vue-template-compiler css-loader file-loader style-loader url-loader html-webpack-plugin cross-env。

安装完后,如图:

package.json

webpack搭建vue项目环境(完整版) 技术杂谈 第3张

第五步:根目录下建立src文件夹,在文件夹下建立app.vue和main.js文件。
app.vue

<template>
<div class="app">{{text}}</div>
</template>
<script>
export default {
data() {
return {
text:'zdj'
}
}
}
</script>
<style>
.app{
width: 100px;
height: 100px;
background-color: red;
}
</style>

main.js

import Vue from ‘vue’;
import App from ‘./app.vue’;

const root = document.createElement(‘div’)
document.body.appendChild(root)

new Vue({
render: (h) => h(App)
}).$mount(root)

第六步

根目录下建立webpack.config.js文件。

webpack.config.js

const path = require(‘path’);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
const HTMLPlugin = require(‘html-webpack-plugin’);
const webpack = require(‘webpack’);
const isDev = process.env.NODE_ENV === ‘development’;

const config = {
entry: path.join(dirname, ‘src/main.js’), // 入口文件 用path.join(dirname, ‘src/index.js’)将路径拼接为绝对路径
output: {
filename: ‘bundle.js’, // 文件输出
path: path.join(_dirname, ‘/dist’)
},
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
‘process.env’: {
NODE
ENV: isDev ? ‘“development”‘ : ‘“production”‘
}
}),
new HTMLPlugin() // 处理html模版
],
module: {
rules: [
{
test: /.vue$/,
loader: ‘vue-loader’ // 处理以.vue结尾的文件
},
{
test: /.css$/, // 处理css文件
use: [
‘style-loader’,
‘css-loader’
]
},
{
test: /.(gif|jpg|jpeg|png|svg)$/, // 处理图片文件
use: [
{
loader: ‘url-loader’,
options: {
limit: 1024,
name: ‘[name].[ext]’
}
}
]
}
]
},
watch:true //开启自动打包
}
if(isDev){
config.devtool = ‘#cheap-module-eval-source-map’ // 调试代码时可以看到自己原本的代码,而不是编译后的
config.devServer = {
port: 8000,
host: ‘0.0.0.0’,
overlay: {
errors: true // 将webpack编译的错误显示在网页上面
},
open: true // 在启用webpack-dev-server时,自动打开浏览器
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config;

第七步

执行: npm run dev

打包失败!!!!!

webpack搭建vue项目环境(完整版) 技术杂谈 第4张

错误提示说不能编译vue.

在我翻阅了大量资料后,终于有了解决方案。如下:

第八步

package.js 中添加三条命令

“start”:”webpack-dev-server –open –hot –inline”,
“dev”: “webpack –mode development”,
“build”: “webpack –mode production”,

package.js

webpack搭建vue项目环境(完整版) 技术杂谈 第5张

执行npm run dev. 打包成功。

推荐您阅读更多有关于“webpackvue,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。