1.页面url中#
号处理
使用 vue-cli 生成的项目模板,运行时在url地址栏多一个#号,服务器部署后会出现 www.xxx.com/#/ 的情况.
解决方案:
修改 src/router/index.js
文件,vue-router 默认 hash 模式 ,我们可以修改 vue-router 模式为 history
,设置 base
url效果正常了
const router = new VueRouter({
mode: 'history',
base: '/',
routes: [...]
})
更多的关于路由问题查看 vue-router 官网:https://router.vuejs.org/zh-cn/essentials/history-mode.html
2.服务器部署 vue 子模块项目
有一个项目地址为 www.xxx.com ,这个项目下又添加了一个子模块,子模块是单独的一个项目,域名效果变成 www.xxx.com/demo 的形式访问子模块项目的首页,通过 www.xxx.com/demo/home 的方式访问子模块项目路由页面,也可以解决一个服务器部署多个项目.
解决方案:
第一步:修改 src/router/index.js
文件中 router
的 base
配置,效果如下
Vue.use(Router)
export default new Router({
mode: 'history',
base: '/demo',
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})
第二步:修改 npm run build
命令打包生成的目录结构。打开前端项目根目录下 /config/index.js
文件,打包的默认路径为生成 dist
静态文件目录,默认路径配置如下
...
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
修改打包路径配置,静态文件目录下添加一个 demo 子目录,其他打包文件放到 demo 目录下,注意目录中的 / , 前端项目中的配置完成了
...
build: {
index: path.resolve(__dirname, '../dist/demo/index.html'),
assetsRoot: path.resolve(__dirname, '../dist/demo'),
assetsSubDirectory: 'static',
assetsPublicPath: '/demo/',
...
第三步:修改 dev
属性下的 assetsPublicPath
路径配置,由原来的/
修改为/demo/
...
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/demo/',
proxyTable: {},
host: 'localhost',
port: 8080,
autoOpenBrowser: false,
...
dev 属性下的 assetsPublicPath: ‘/’, 属性问题,根据实际情况调整
第四步:修改服务器 nginx 的配置,设置 demo 路径访问内容,配置如下
server {
listen 80;
server_name example.com;
location / {
root /xx/xx/xx/xx/dist;
}
location /demo {
alias /xx/xx/xx/xx/dist/demo;
}
}
root 和 alias 区别自行百度