Vue独立编译打包

VUE是一种轻量级的前端框架，它采用了MVVM(Model-View-ViewModel)的架构模式，是一个用于构建用户界面的渐进式框架。VUE支持热重载，组件化开发，数据双向绑定，指令等特性，而且这些特性使得它在前端业界受到了广泛的关注和好评。

那么接下来我们来讲一下VUE独立编译打包，vue-cli提供了一种构建和打包工具，可以方便地将你的代码打包成生产环境要用到的JavaScript资产。不过对于我们需要对构建过程进行自定义而不是使用默认配置来对代码进行优化时，我们通过独立编译打包就可以轻松实现这种需求。

VUE提供了一个构建工具vue-loader以及一组生产模板，可以轻松将单个Vue文件编译成JavaScript模块。我们可以在Webpack的构建系统中使用vue-loader，把Vue组件编译成Javascript代码，同其它的Javascript模块类俩使用，进行代码压缩、混淆等优化工作。

你的VUE组件：//App.vuetemplate>
    div>
    h1>
    这是一个demo/h1>
    /div>
    /template>
    script>
export default {
name: 'app'}
    /script>
    style>
h1 {
     color: red;
 }
    /style>
你的entry文件：//main.jsimport Vue from 'vue'import App from './App.vue'new Vue({
    el: '#app',render: h =>
h(App)}
)

以上是简单的Vue组件代码，我们将其编写在单独的文件中，并在entry文件中引用它。要使用独立打包，首先我们需要构建一个VUE-loader的打包配置。

配置vue-loader：module: {
rules: [// ... 其它规则{
test: /\.vue$/,loader: 'vue-loader'}
]}
    配置完了，我们就可以通过webpack对打包后的文件进行染色、压缩等操作。

如果我们需要打包后的组件单独在一个页面中运行，我们需要将打包后的文件引入一个html页面中。

在这个html页面中加入如下代码即可：!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    title>
    My App/title>
    /head>
    body>
    div id="app">
    /div>
    script src="dist/build.js">
    /script>
    /body>
    /html>
    

现在我们重新构建项目，然后把dist/build.js中的JavaScript复制到上面的html文件中，然后你就可以运行你的独立打包的Vue组件啦。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！