打包上线(项目完成,将项目放在服务器的准备工作)
如果运行其中的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 ,让后端在服务器配置重定向,也就是倒数第二张图。