vue学习 - vue-cli生成项目问题整理(Vue3 + vue-cli4 + vite)

云处安

已于 2023-03-06 14:31:49 修改

阅读量166

点赞数

文章标签： vue.js

于 2023-03-03 15:32:59 首次发布

本文链接：https://blog.csdn.net/qq_36575358/article/details/129097334

版权

Q：vue-cli生成的项目如何修改输出路径？

A：vue.config.js中添加修改

outputDir: 'dist',

在这里插入图片描述

Q：打包文件后浏览文件页面显示资源文件路径问题如何解决？

A：vue.config.js中添加修改

publicPath: './',

在这里插入图片描述

vue.config.js 配置

module.exports = {
   

    // 选项

    //  基本路径

    publicPath: "./",

    //  构建时的输出目录

    outputDir: "dist",

    //  放置静态资源的目录

    assetsDir: "static",

    //  html 的输出路径

    indexPath: "index.html",

    //文件名哈希

    filenameHashing: true,

    //用于多页配置，默认是 undefined

    pages: {
   

        index: {
   

            // page 的入口文件

            entry: 'src/index/main.js',

            // 模板文件

            template: 'public/index.html',

            // 在 dist/index.html 的输出文件

            filename: 'index.html',

            // 当使用页面 title 选项时，

            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>

            title: 'Index Page',

            // 在这个页面中包含的块，默认情况下会包含

            // 提取出来的通用 chunk 和 vendor chunk。

            chunks: ['chunk-vendors', 'chunk-common', 'index']

        },

        // 当使用只有入口的字符串格式时，

        // 模板文件默认是 `public/subpage.html`

        // 如果不存在，就回退到 `public/index.html`。

        // 输出文件默认是 `subpage.html`。

        subpage: 'src/subpage/main.js'

    },

    //  是否在保存的时候使用 `eslint-loader` 进行检查。

    lintOnSave: true,

    //  是否使用带有浏览器内编译器的完整构建版本

    runtimeCompiler: false,

    //  babel-loader 默认会跳过 node_modules 依赖。

    transpileDependencies: [ /* string or regex */ ],

    //  是否为生产环境构建生成 source map？

    productionSourceMap: true,

    //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。

    crossorigin: "",

    //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。

    integrity: false,

    //  调整内部的 webpack 配置

    configureWebpack: () => {
   }, //(Object | Function)

    chainWebpack: () => {
   },

    // 配置 webpack-dev-server 行为。

    devServer: {
   

        open: tr