标签：index Vue 自定义 pay 路径 js Pay path true
默认情况下，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), 这样才能保证资源的正确访问
标签：index,Vue,自定义,pay,路径,js,Pay,path,true 来源： https://blog.csdn.net/u012230055/article/details/98208065
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。