为什么Vue App构建结束但App无法正常运行

时间:2019-06-13 19:29:20

标签: javascript vue.js webpack

我的vue应用程序可以在开发中工作并生成构建。 当我尝试在生产环境中进行构建时,屏幕变黑,这是我拥有的CSS,仅此而已。我还向JS发出了警报,并执行了javascript。

我在公用文件夹中使用webpack,vierouter,vue cli和static内容。 我相信webpack可能配置错误,或者Vue路由器配置错误。

Structure my project

//Main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

Vue.config.productionTip = true

//HOME
require('./components/templates');
require('./components/sections/featured');
require('./components/sections/genders');
require('./components/sections/landscape');
require('./components/sections/portrait');
require('./components/sections/series');
require('./components/sections/specials');
require('./components/sections/versus');

import HeaderSearch from './components/header/HeaderSearch'
Vue.component('HeaderSearch', HeaderSearch);

//PROFILE
import ProfileContent from './components/sections/profile/ProfileContent'
import ProfileHeader from './components/sections/profile/ProfileHeader'
Vue.component('ProfileContent', ProfileContent);
Vue.component('ProfileHeader', ProfileHeader);

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')
` ``
//webpack.config.js

let webpack = require("webpack");
let path = require("path");

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: "production",
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "../dist"),
        publicPath: "dist/",
        filename: "build.js",
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["vue-style-loader", "css-loader"]
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: "file-loader",
                options: {
                    name: "[name].[ext]?[hash]"
                }
            },
            {
                test: /\.svg$/,
                loader: 'vue-svg-loader'
            },
        ]
    },
    resolve: {
        alias: {
            vue$: "vue/dist/vue.esm.js"
        },
        extensions: ["*", ".js", ".vue", ".json"]
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: "#eval-scource-map"
};

if (process.env.NODE_ENV === "production") {

    module.exports.devtool = "#source-map";

    module.exports.optimization = {

        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    compress: {
                    }
                },
            }),
        ],
    };
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: '"production"'
            }
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),

        new VueLoaderPlugin(),

        new CopyPlugin([
            { from: './public/assets', to: 'assets' }
          ])

    ]);
}

//App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',

}
</script>

<style>
  @import './assets/styles/main.css';
  @import './assets/styles/font-awesome.min.css';
</style>

SRC
C:.
├───assets
│   ├───fonts
│   ├───images
│   │   ├───c-esp
│   │   ├───canales
│   │   │   └───c13
│   │   ├───caratulas
│   │   ├───especiales
│   │   └───perfiles
│   └───styles
├───components
│   ├───header
│   ├───pages
│   ├───sections
│   │   ├───featured
│   │   ├───genders
│   │   ├───landscape
│   │   ├───portrait
│   │   ├───profile
│   │   ├───series
│   │   ├───specials
│   │   └───versus
│   └───templates
└───views

Public 
C:.
└───assets
    ├───fonts
    ├───images
    │   ├───c-esp
    │   ├───canales
    │   │   └───c13
    │   ├───caratulas
    │   ├───especiales
    │   └───perfiles
    ├───logos
    └───styles

dist
C:.
└───assets
    ├───fonts
    ├───images
    │   ├───c-esp
    │   ├───canales
    │   │   └───c13
    │   ├───caratulas
    │   ├───especiales
    │   └───perfiles
    ├───logos
    └───styles

0 个答案:

没有答案