vue项目打包注意事项

最新推荐文章于 2023-10-27 09:15:23 发布

夜里没有我

最新推荐文章于 2023-10-27 09:15:23 发布

阅读量221

点赞数

分类专栏： vue 文章标签： dist vue打包踩坑

本文链接：https://blog.csdn.net/qq_41764878/article/details/98427700

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

工程文件打包修改路径

utils文件：

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        //打包打开这个注释
		//  publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

index 文件：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //打包打开这个注释，注释上面一行
    // assetsPublicPath: './',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8081, // 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-

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //打包打开这个注释，注释上面一行
  //  assetsPublicPath: './',

tomcat 服务器：处理访问找不到路径问题，防止出现404

1 把dist 文件放到webapps下

2 把dist 里面的index 文件拿出来放到webapps下

3 新建WEB-INF文件夹，在WEB-INF文件里面新建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

目录结构