在现有的 grunt 应用中实现 vue

Question

我有这个应用程序，它通过 grunt 运行一些返回脚本并将它们放在特定文件夹中的任务。 我现在想添加一个运行和编译 vue 文件的任务，并在同一目标文件夹中返回结果脚本。 我已尝试遵循本指南->'https://gregtyler.co.uk/blog/vuejs-browserify-grunt?fbclid=IwAR3T_r07EFQywvZJYpBMAmaVebRdN2kHq29uDYy4KV45EGcfCvrAm6FnFg8'

但最终结果运行任务但未生成返回脚本，并且任务返回消息也不存在。 它只说“完成”

在这里找到结果

这是我的咕噜声文件。 该应用程序使用插件“load-grunt-config”根据“grunt”文件夹中的文件分解我的任务。

/*global module, require*/
module.exports = function(grunt) {
// Get the version of the component from the package.json file.
var package = require('./package.json');
var componentVersion = package.version;
var componentName = package.name;

require('load-grunt-config')(grunt, {
    config: {
        // When changing version, don't forget to change version in the js too (the version number sent to analytics)!
        componentVersion: componentVersion,
        componentName: componentName,
        componentPath: 'dist/resources/'
    }
});
};

这是 grunt 文件夹中的文件。 该文件相当于我的新 vue-task

module.exports = {
browserify: {
    bundle: {
      src: './js/index.js',
      dest: '<%= componentPath %>/<%= componentName %>.<%= componentVersion %>-new.min.js'
    },
    options: {
      browserifyOptions: {
        debug: true
      },
      transform: [
        ['vueify']
      ]
    }
}
}

我的 package.json

{
  "name": "******",
  "version": "1.2.8",
  "browser": {
    "vue": "vue/dist/vue.common.js"
  },
  "dependencies": {
    "angular": "1.6.4",
    "browserify": "^17.0.0",
    "vue": "^2.6.14",
  },
   "devDependencies": {
    "copyfiles": "1.2.0",
    "grunt": "^1.4.1",
    "grunt-browserify": "^6.0.0",
    "grunt-contrib-less": "1.3.0",
    "grunt-contrib-requirejs": "1.0.0",
    "load-grunt-config": "0.19.2",
    "npm-html2js": "^0.1.8",
    "rimraf": "2.5.4",
    "vueify": "^9.4.1"
   },
  "scripts": {
    "build": "npm run clean && npm run html2js && npm run build:js && npm run copy:mgnl && npm run copy:assets && node node_scripts/addVersion.js && rimraf build && npm run compress",
"build:dev": "npm run clean && npm run html2js && npm run build:jsdev && npm run copy:mgnl && npm run copy:assets && node node_scripts/addVersion.js && rimraf build",
"clean": "rimraf dist && rimraf build && mkdir build && mkdir dist && mkdir dist/stores-and-retailers",
"html2js": "npm-html2js -i 'js/*.html' -o 'build/templates.js'",
"build:js": "grunt build",
"build:jsdev": "grunt build:dev",
"compress": "tar -C dist -zcf dist/stores-and-retailers.tar.gz stores-and-retailers",
"copy:mgnl": "copyfiles -u 1 'mgnl/**/*' dist/stores-and-retailers",
"copy:assets": "copyfiles -u 1 'assets/**/*' dist/stores-and-retailers/assets/",
"deploy-build": "npm run build",
"deploy-build:dev": "npm run build:dev",
   }
}

index.js 文件

const Vue = require('vue');

 import StoresAndRetailersMap from './components/StoresAndRetailersMap.vue'

 new Vue({
   el: '#storesAndRetailers',
   render: (createElement) => createElement(StoresAndRetailersMap)
 });

这是我想编译和使用的 vue 组件

<template>
<div>
    <p>
        {{ msg }}
    </p>
</div>
  </template>
 <script>
        export default {
name: 'StoresAndRetailersMap',
props:{

},
data(){
    return {
        msg: "hello world"
    }
},
methods:{

},
created(){
}
 }