在使用webpack打包的时候,需要将项目中的vue.js直接打包进项目,这样就可以将项目发布到任何地方运行。
通过下面代码来安装vue到项目目录(由于目前已经发布了vue3 所以需要指定版本)
npm install vue@2 --save
需要注意,这里不在使用开发环境,因为vue是需要在生产中也要用的文件,所以没有加开发的--dev 符号
安装完vue之后,需要在js文件里引用vue才能使用
import Vue from "vue";
const app = new Vue({
el:'#app',
data:{
ss:'这是一条信息'
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
<div id="app">{{ss}}</div>
</body>
</html>
默认采用npm安装之后的vue是runtimeonly模式,可以运行但是无法编译模板,所以需要将vue切换到运行时+编译器的版本,通过webpack.config.js文件来修改
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
输入命令打包
npx webpack