Question

我试图将Vue.js添加到MVC 5项目中，并具有webpack转换的所有好处。我使用下面的两个链接作为参考，组合成一个项目...

MVC 5 ES6项目
https://www.slightedgecoder.com/2017/05/22/setting-es6-environment-asp-net-mvc-5/

Core 2 Vue.js项目
https://github.com/MarkPieszak/aspnetcore-Vue-starter

但是，我在合并后收到以下错误：

错误

ERROR in ./ClientApp/app.js
1>      Module build failed: SyntaxError: C:/Users/rich/source/repos/VueMvcTest/aspnetcore-Vue-starter-master/Vue2Mvc5/ClientApp/app.js: Unexpected token (19:4)
1>      
1>        17 |     store,
1>        18 |     router,
1>      > 19 |     ...App
1>           |     ^
1>        20 | });
1>        21 | 
1>        22 | export {
1>      
1>       @ ./ClientApp/boot-app.js 9:11-27

引导-app.js

import './css/site.css';
import 'core-js/es6/promise';
import 'core-js/es6/array';

import { app } from './app';

app.$mount('#app');

app.js

import Vue from 'vue'
import axios from 'axios'
import router from './router/index'
import store from './store'
import { sync } from 'vuex-router-sync'
import App from 'components/app-root'
//import { FontAwesomeIcon } from './icons'

// Registration of global components
//Vue.component('icon', FontAwesomeIcon)

Vue.prototype.$http = axios

sync(store, router)

const app = new Vue({
  store,
  router,
  ...App
})

export {
  app,
  router,
  store
}

webpack.config.js

const path = require('path');

module.exports = () => {

    const isDevBuild = !(process.env.NODE_ENV && process.env.NODE_ENV === 'production');

    return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot-app.js' },
        output: {
            path: path.resolve(__dirname, './Scripts/dist'),
            filename: 'bundle.js'
        },
        // IMPORTANT NOTE: If you are using Webpack 2, replace "loaders" with "rules"
        module: {
            rules: [
                {
                    loader: 'babel-loader',
                    test: /\.js$/,
                    exclude: /node_modules/
                },
                { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
                { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        resolve: {
            extensions: ['.js', '.vue'],
            alias: isDevBuild ? {
                'vue$': 'vue/dist/vue',
                'components': path.resolve(__dirname, './ClientApp/components'),
                'views': path.resolve(__dirname, './ClientApp/views'),
                'utils': path.resolve(__dirname, './ClientApp/utils'),
                'api': path.resolve(__dirname, './ClientApp/store/api')
            } : {
                    'components': path.resolve(__dirname, './ClientApp/components'),
                    'views': path.resolve(__dirname, './ClientApp/views'),
                    'utils': path.resolve(__dirname, './ClientApp/utils'),
                    'api': path.resolve(__dirname, './ClientApp/store/api')
                }
        }
    }];
};

的package.json

{
  "name": "vue2mvc5",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "npm-watch",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "axios": "^0.15.3",
    "core-js": "^2.5.3",
    "vue": "^2.5.16",
    "vue-router": "^2.8.1",
    "vue-server-renderer": "^2.5.16",
    "vue-template-compiler": "^2.5.16",
    "vuex": "^2.5.0",
    "vuex-router-sync": "^4.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "npm-watch": "^0.3.0",
    "webpack": "^4.9.1",
    "webpack-cli": "^2.1.4",
    "@fortawesome/fontawesome": "^1.1.4",
    "@fortawesome/fontawesome-free-brands": "^5.0.8",
    "@fortawesome/fontawesome-free-solid": "^5.0.8",
    "@fortawesome/vue-fontawesome": "0.0.22",
    "aspnet-webpack": "^2.0.3",
    "babel-eslint": "^8.2.2",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "bootstrap": "^4.0.0",
    "cross-env": "^3.2.4",
    "css-loader": "^0.26.4",
    "eslint": "^4.18.2",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-html": "^4.0.2",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "event-source-polyfill": "0.0.7",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.9.0",
    "font-awesome": "^4.7.0",
    "jquery": "^2.2.4",
    "node-sass": "^4.8.2",
    "optimize-css-assets-webpack-plugin": "^1.3.2",
    "popper.js": "^1.14.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^14.2.2",
    "webpack-hot-middleware": "^2.21.2"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "watch": {
    "build": "ClientApp/*.js"
  }
}

Answer 1

调整你的webpack.config.js：

{
    loader: 'babel-loader',
    test: /\.js$/,
    exclude: /node_modules/,
    query: {
        presets: ["es2015", "stage-2"],
        comments: false
    }
}

这种方式在编译时应该在项目中包含stage-2。

Answer 2

似乎未启用展开运算符...。在package.json尝试切换到babel-preset-stage-3时，它会包含transform-object-rest-spread插件babel-preset-stage-3。如果你想进一步调查，这是一个很好的帖子，谈论启用传播运营商。

Unexpected token on spread operator

在MVC 5项目中添加Vue.js.

2 个答案: