在 MVC 5 项目中添加 Vue.js

Posted 2023-02-22

【中文标题】在 MVC 5 项目中添加 Vue.js

【英文标题】：Adding Vue.js in an MVC 5 Project

【发布时间】：2018-11-06 18:25:36

【问题描述】：

我正在尝试将 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

Boot-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"
  

【参考方案1】：

似乎没有启用扩展运算符...。在您的package.json 尝试切换到babel-preset-stage-3 它包括transform-object-rest-spread 插件babel-preset-stage-3。如果您想对此进行进一步调查，这是一篇很好的文章，讨论了启用扩展运算符。

Unexpected token on spread operator

【讨论】：

Stage2 应该也能正常工作，可能是 webpack.config.js 的问题。也许他在 babel 模块 query.presets 中缺少 stage-2

【参考方案2】：

调整你的 webpack.config.js：

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

这样它应该在编译时在您的项目中包含第 2 阶段。

【讨论】：

解决了！我还遗漏了一些我自己想出来的东西，现在一切正常 - 谢谢！！