vue项目如何访问index.html,Vue——自定义项目访问路径

默认状况下，Vue项目的访问路径以 /#/，但咱们有时候可能须要给项目定义一个明确的访问路径，如 /my_vue/ 等，这时咱们须要修改配置，自定义项目的访问路径，方法以下：css

1. 在index.html添加 (pay自定义的名称)

收银台

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), 这样才能保证资源的正确访问html