如题,开发的时候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