多项目vue-router去掉#

2024年1月20日 252次阅读 来源: 南蓝NL

-大家很容易想到,去掉#不就是在配置路由的时候设置路由的模式为history吗,没错,的确是这样,但是这仅限于单页面应用
-而在实际工作中,经常是多项目开发

1、创建两个或者多个项目设置路由模式为history

export default new Router({
    base: '/demo/', 
    mode: 'history',
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
        {
            path: '/works',
            name: 'works',
            component: Works
        }
    ]
})

base参数必须要配置

2、打包（npm run build）

 build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/demo/',

        /**
         * Source Maps
         */

        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',

        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],

        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }

在config的index.js 的生产环境的参数设置assetPublicPath路径

3、配置nginx的nginx.conf

location ^~ /demo/ {
            try_files $uri $uri/ /demo/index.html;
        }
location ^~ /subDemo/ {
            try_files $uri $uri/ /subDemo/index.html;
        }

我这里是两个项目demo和subDemo，主要步骤就到这里了
附:[vue多项目部署]（https://blog.csdn.net/echo008/article/details/77098142）

    原文作者：南蓝NL
    原文地址: https://www.jianshu.com/p/1fcac993bf09
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞