我的vue应用程序可以在开发中工作并生成构建。 当我尝试在生产环境中进行构建时,屏幕变黑,这是我拥有的CSS,仅此而已。我还向JS发出了警报,并执行了javascript。
我在公用文件夹中使用webpack,vierouter,vue cli和static内容。 我相信webpack可能配置错误,或者Vue路由器配置错误。
//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