默认情况下，Vue项目的访问路径以
/#/，但我们有时候可能需要给项目定义一个明确的访问路径，如/my_vue/等，这时我们需要修改配置，自定义项目的访问路径，方法如下：
1. 在index.html添加 <meta base=”/pay/”> (pay自定义的名称)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0">
<meta base="/pay/">
<title>收银台</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2. 在配置路由的index.js添加 mode: ‘history’, base: ‘/pay/’
import Vue from 'vue'
import Router from 'vue-router'
import Pay from '@/components/Pay'
Vue.use(Router)
export default new Router({
mode: 'history',
base:'/pay/',
routes: [
{
path: '/',
name: 'Pay',
component: Pay
}
]
});
3. 在项目的 config\index.js配置assetsPublicPath: '/pay/',
'use strict'
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/pay/',
proxyTable: {},
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/pay/',
/**
* Source Maps
*/
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}
4. 以上就已经配置完了,最后项目的请求地址就是:
http://localhost:8080/pay/
注意: 所有的配置名称必须一致(如pay), 这样才能保证资源的正确访问