在vue3.0中如何去除网址中的#
vue的history模式的实现在vue3.0中如何去除网址中的#号history模式在vue3.0中如何去除网址中的#号事情是这样的,最近在用vue写一个商场的项目,当时对于页面网址美观程度并无要求,所以在配置路由的时候采用的是hash模式(默认模式)代码如下:结果就是网址带#号//router.jsexport default new VueRouter({base:'/',...
·
vue的history模式的实现
在vue3.0中如何去除网址中的#号
事情是这样的,最近在用vue写一个商场的项目,当时对于页面网址美观程度并无要求,所以在配置路由的时候采用的是hash模式(默认模式)
代码如下:结果就是网址带#号
//router.js
export default new VueRouter({
base:'/',
routes: [
{
path: '/',
name: 'index',
redirect: '/content/home'
} ]
})
//vue.config.js vue3的配置文件
module.exports = {
publicPath: "./", // 构建好的文件输出到哪里
outputDir: "dist", // where to put static assets (js/css/img/font/...)
lintOnSave: true,
transpileDependencies: [
/* string or regex */
],
productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {
},
configureWebpack:{
//格式为 'aaa':'bbb' aaa 指要加载的模块 bbb 指在项目中的名称
externals: {
'vue':'Vue',
'vue-router':'VueRouter',
'axios':'axios',
'element-ui':'Element',
}
},
css: {
extract: true, // 允许生成 CSS source maps?
sourceMap: false,
loaderOptions: {},
modules: false
},
parallel: require("os").cpus().length > 1,
pwa: {},
devServer: {
disableHostCheck: true,
host: "0.0.0.0",
port: 12000,
https: false,
hotOnly: false,
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
history模式
router.js文件代码如下:需要配置 mode:‘history’ 以及 base:’/’
export default new VueRouter({
mode: 'history',
// base: '/ishow/qian/dist/',
base:'/',
routes: [
{
path: '/',
name: 'index',
redirect: '/content/home'
}]
)}
vue.config.js需要配置 publicPath: “/”, 而不是“./”
//vue.config.js vue3的配置文件
module.exports = {
publicPath: "/", // 构建好的文件输出到哪里
outputDir: "dist", // where to put static assets (js/css/img/font/...)
lintOnSave: true,
transpileDependencies: [
/* string or regex */
],
productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {
},
configureWebpack:{
//格式为 'aaa':'bbb' aaa 指要加载的模块 bbb 指在项目中的名称
externals: {
'vue':'Vue',
'vue-router':'VueRouter',
'axios':'axios',
'element-ui':'Element',
}
},
css: {
extract: true, // 允许生成 CSS source maps?
sourceMap: false,
loaderOptions: {},
modules: false
},
parallel: require("os").cpus().length > 1,
pwa: {},
devServer: {
disableHostCheck: true,
host: "0.0.0.0",
port: 12000,
https: false,
hotOnly: false,
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
更多推荐
已为社区贡献2条内容
所有评论(0)