如题,开发的时候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) })
<template> <div id="app"> <router-view class="page-view"></router-view> </div> </template> <script> export default { name: 'app', data () { return { } }, components: { } } </script>
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 }) ]) }
修改/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
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。