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

问题描述

我正在尝试将 Vue.js 添加到具有 webpack 转译的所有好处的 MVC 5 项目中。我使用下面的两个链接作为参考来合并到一个项目中......

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

核心 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

引导应用程序.js

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

import { app } from './app';

app.$mount('#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')
                }
        }
    }];
};

包.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"
  }
}

标签： webpackvue.jsecmascript-6vuejs2

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

问题描述

解决方案

推荐阅读