Question

我正在尝试使用Homestead与VueJS一起学习Laravel。我决定通过npm安装Vuetify，而不是Bootstrap。

这是我的app.js：

import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/App.vue";
import ExampleComponent from './components/ExampleComponent.vue';

import VueRouter from "vue-router";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(Vuetify, VueRouter, axios, VueAxios);


const routes = [
    { path: "/", name: "Dashboard", component: ExampleComponent }
];

const router = new VueRouter({ mode: "history", routes: routes, linkExactActiveClass: "active" });
new Vue(Vue.util.extend({ router }, App)).$mount("#app");

但是在我的控制台日志中，出现此错误：

源映射错误：SyntaxError：JSON.parse：出现意外字符 JSON数据资源URL的第1行第1列：http://xcy.dv/js/app.js 源地图URL：vuetify.js.map

我在这里想念什么？我是VueJS的新手

Answer 1

在Vuetify社区的帮助下，我发现需要像这样在我的webpack.mix.js中加入.sourceMaps()：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css').sourceMaps();

由于默认情况下处于禁用状态，因此基本上可以启用源地图。

Answer 2

我必须用{p>更新webpack.mix.js

mix.webpackConfig({
   output: {
      chunkFilename: mix.inProduction() ? "js/prod/chunks/[name]?id=[chunkhash].js" : "js/dev/chunks/[name].js"
   },
   devtool: 'source-map' // Notice this
}).sourceMaps(); // And this

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

vuetify.js.map：源地图错误：SyntaxError

2 个答案: