我有一个具有以下配置的 VueJS 应用程序:
1) 配置.index.js
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
2) 路由器/index.js
export default new Router({
mode: 'history',
// base: process.env.ROUTER_BASE,
routes: [
{
path: '/',
name: 'HelloWorldBase',
component: HelloWorld
},
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/auth',
name: 'Auth',
component: Auth
}
]
})
3).htaccess
## https://router.vuejs.org/en/essentials/history-mode.html & https://stackoverflow.com/a/34624803
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]
在我运行之后:npm run build
dist 文件夹包含文件夹:“static”和 index.html 文件。
如果我在运行时将“dist”文件夹和“.htaccess”文件的内容从现有网站复制到“vue”文件夹:http://myapp.com/vue/hello或者只是 http://myapp.com/vue/hello ,页面不会加载,而只会加载“index.html”的内容。
我做错了什么?
如果我创建一个虚拟机并将其指向我网站的“vue”文件夹,页面运行良好。比如我的虚拟机是http://vue.local .在这种情况下,http://vue.local/hello页面正常。
但是当我想在其他网站内部运行 Vue 时,页面不起作用,所有页面都返回 index.html 的内容。
任何帮助都会很棒,谢谢!
最佳答案
您的问题是您在子路径中托管 vue 应用程序,而默认情况下它预计存在于 /
中。
要解决此问题,您必须设置 base vue-router
的选项。
可能您还需要在 config.index.js
中设置 assetsPublicPath
关于javascript - VueJS 构建到文件夹路由不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50003678/