开发者社区> 问答> 正文

vue2项目run build后部署到服务器访问空白,run dev可以正常访问?报错

如题,开发的时候run dev可以正常访问,run build后,发布到服务器后访问空白,也没报错,求助求助

main.js:

import Vue from 'vue'
import VueRouter from "vue-router"
import App from './App.vue'
import 'font-awesome/css/font-awesome.min.css'
import 'weui/dist/style/weui.min.css'
import './assets/iconfont/iconfont.css'
Vue.use(VueRouter)

import PageIndex from './pages/index.vue'
import PageTimes from './pages/times.vue'

const router = new VueRouter({
	mode: 'history',
	base: __dirname,
	routes: [
		{path: '/', redirect: '/index'},
		{path: '/index', component: PageIndex},
		{path: '/times', component: PageTimes}
	]
})

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App)
})



App.vue:

<template>
  <div id="app">
    <router-view class="page-view"></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      
    }
  },
  components: {
    
  }
}
</script>



webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
          test: /\.css$/,
          loaders: ["style-loader", "css-loader"]
      },
      {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(svg|woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        query: {
          limit: 10000,
          name: path.posix.join('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}




展开
收起
爱吃鱼的程序员 2020-06-08 20:39:05 1111 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    修改/config/index.js文件第10行成:

    assetsPublicPath:'./',

    原本是:'/',这个路径默认是错误的。

    我的问题和你的一样,dev时可以,build出来使用服务打开,css,js文件都加载了的,就是内容不出来。不知道咋回事。感觉应该是路由那边哪儿有问题。

    常出现请问下,楼主,你的问题现在是怎么解决的呢,我也遇到这个问题了,求指教呀

    一般出现这个问题是build的代码放置的目录不在域名根目录下,而是在子目录下。

    比方说是放在www.oschina.net/weui/dist下,这个时候需要设置router的base属性,因为router的base默认设置为/,在build前需要修改为router的base:/weui/dist/,但是这样不通用,因为npmrundev的时候,一般是在base:/下才能正常运行,每次发布都需要修改下配置。

    最好的解决办法是:

    constrouter=newVueRouter({
       mode:"history",
       routes:[
          {path:"/",redirect:"/index"},
          {path:"/index",component:PageIndex},
          {path:"/times",component:PageTimes}
       ]
    })

    //console.log(process.env)
    if(process.env.NODE_ENV==="production")router.base=window.location.pathname

    //开发环境下运行就采用默认的base设置:/,即无需设置 
    //【process.env.NODE_ENV是采用vue-cli的webpack提供的参数】


    参考:
      [HavetherouterbehaverelativetoURLtherootappismountedfrom]https://github.com/vuejs/vue-router/issues/1497]
      [Vue-routerrouteindevelopmentmodeonly]https://forum.vuejs.org/t/vue-router-route-in-development-mode-only/7634/2
     

    2020-06-08 20:39:21
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
利用编译将 Vue 组件转成 React 组件 立即下载
Vue.js在前端服务化上的实践与探索 立即下载