vue 打包静态资源 二级域名 页面无法正常显示
前言…由于项目老大要求,服务器那边要放在二级域名下,这样能放更多项目(但其实一核一G放一个项目已经快爆了…)不管怎样,还是要配置下的,毕竟以后一定会用到…尝试首先看一下 vue 关于打包的配置文件这里现在又两个关于 build 的文件夹在经过对这几个文件进行排查之后,我发现 config 下的 index.js 是关于打包路径的重要配置文件大概长这样'use strict'//...
·
前言…
由于项目老大要求,服务器那边要放在二级域名下,这样能放更多项目(但其实一核一G放一个项目已经快爆了…)
不管怎样,还是要配置下的,毕竟以后一定会用到…
尝试
首先看一下 vue 关于打包的配置文件
这里现在又两个关于 build 的文件夹
在经过对这几个文件进行排查之后,我发现 config 下的 index.js 是关于打包路径的重要配置文件
大概长这样
'use strict'
// Template version: 1.2.6
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/paperless': {
target: 'http://192.168.31.132:80', // 132 206
changeOrigin: true,
pathRewrite: {
'^/paperless': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: false,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-source-map',
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
/**
* You can set by youself according to actual condition
* You will need to set this if you plan to deploy your site under a sub path,
* for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then assetsPublicPath should be set to "/bar/".
* In most cases please use '/' !!!
*/
assetsPublicPath: (process.argv[2] && process.argv[2] == 'paperless_cms') ? '/paperless_cms/' : '/',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: 'source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report || false,
// `npm run build:prod --generate_report`
generateAnalyzerReport: process.env.npm_config_generate_report || false
}
}
而作为对打包路径最重要的配置在这里:
其实这里的注释已经提示我们了,如何去配置二级域名下的文件
之前一直没自信看,导致打包出来的文件放在二级域名下访问不到静态资源,
英语好的同学其实已经明白了,只需要将assetsPublicPath:
的路径改为 /middlePath/
就可以了
然后执行 npm run build
成功打包文件
放到服务器上能看到页面了
更多推荐
已为社区贡献5条内容
所有评论(0)