vue框架项目打包

打包上线（项目完成，将项目放在服务器的准备工作）

如果运行其中的html文件，如果出现下面的报错。

解决方案如下

解决路径的代码： 在vue.config.js 文件中写下以下代码（文件就是以前写跨域，配置路径名，热更新的代码文件夹）

module.exports = {
    publicPath: "./", // 构建好的文件输出到哪里

    outputDir: "dist",
    lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

    runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖

    transpileDependencies: [
        /* string or regex */
    ], // 是否为生产环境构建生成sourceMap?

    productionSourceMap: false, // 调整内部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

    chainWebpack: (config) => {
    		config.resolve.alias
    		config.output.filename('js/[name].[hash:16].js')
    		
    },

    configureWebpack: () => {
    'js/[id].[hash:16].js'
    }, // CSS 相关选项

    css: {
        // 将组件内部的css提取到一个单独的css文件（只用在生产环境）

        // 也可以是传递给 extract-text-webpack-plugin 的选项对象

        extract: true, // 允许生成 CSS source maps?

        sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }

        loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.

        modules: false
    }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores

    parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

    pwa: {}, // configure webpack-dev-server behavior

    devServer: {
        open: true

        disableHostCheck: false,

        host: "192.168.2.57",

        port: 9000,

        https: false,

        hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

        proxy: null // 跨域的代码

        // before: app => {}
    }, 
	// 第三方插件配置
    pluginOptions: {
        // ...
    }
};

切记，修改完错误，将代码重新打包 （npm run build）

第三步：

如果发现 路径与问题

这是因为路由的模式出问题了，需要后端的配合，脚手架默认的是哈希模式。

删除路由的index.js 中的如上图的一行，默认为哈希模式，如果非要用history ，让后端在服务器配置重定向，也就是倒数第二张图。

修改完路由，重新打包