首页 > 网络编程 > JavaScript > javascript类库 > vue.js > nginx部署到非根目录下vue配置

项目nginx部署到非根目录下vue配置方案

2023-12-06 14:26:46 作者：lilongwei4321

这篇文章主要介绍了项目nginx部署到非根目录下vue配置方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

nginx部署到非根目录下vue配置

1、修改config/index.js

2、修改路由route/index

3、若index.html

有引入static中的 js 和images需要配置 webpack.dev.conf.js 和 webpack.prod.conf.js

配置webpack.dev.conf.js ，大概在55行左右增加path配置

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }),

配置webpack.prod.conf.js ，大概在65行左右增加path配置

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

4、配置好后再来看一下

index.html引入js吧

 <script src=<%= htmlWebpackPlugin.options.path %>/javascript/rem.js></script>
 <script src=<%= htmlWebpackPlugin.options.path %>/javascript/md5.js></script>
 <script src=<%= htmlWebpackPlugin.options.path %>/javascript/moment.js></script>

5、引入static中的图片

具体方法参考//www.jb51.net/javascript/3070665dl.htm

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。