生产环境部署vue项目总结

---

目录1：简述

vue项目的导入，运行，打包； 及生产部署

---

目录2：vue项目了解熟悉

• vue项目文件结构、目录详解：参考-
  https://blog.csdn.net/jiangyu1013/article/details/84998730
• 导入现有Vue项目并编译，打开VSCode直接文件->打开文件夹 导入项目，在控制台进入该项目的目录下运行 npm install 命令，添加包依赖（如果没有安装npm请先安装npm）
  
• 运行项目，在控制台运行 npm run dev 命令开始运行项目，运行完在浏览器通过http://localhost:8080访问项目
• 查看本地是否安装npm；打开本地cmd: npm -v; 检查node.js是否安装: node -v.
  
• vue项目打包部署生产环境准备:打包前修改文件
  @修改一：build > utils.js 修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

@修改二：config > index.js (修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // 需要修改的地方
productionSourceMap: true,

• 完成修改，进行打包，运行命令：npm run build 打包会出现一个dist文件夹

---

目录3：生产部署

• 把打包好的dist文件放进本地Tomcat中webapps的ROOT目录下后运行，通过浏览器访问，不料出现了问题，访问的主页面样式错乱
  

• 原因控制台打印的很明确，没有找到静态资源中的图片.

• 解决：我把dist文件部署到Linux服务器中的设定的目录，并通过nginx配置文件配置该目录为静态资源访问目录，配置如下：(注意，我使用的是https域名,需要上传对应的私钥和证书)

server {
  listen 443;
  server_name www.jackbaidu.com;
  ssl on;

  ### SSL cert files ###
  ssl_certificate found/host.pem;
  ssl_certificate_key found/host.key;
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;

#  location /senson {
#  alias  /memory/elements/myproject/;
#  index index.html;

location ~* \.(html|gif|jpg|jpeg|png|txt|js|css)$ {
  root /memory/elements/myproject/;
  index index.html;
  autoindex on;
}
}

---

目录4：经验总结

• 遇到问题要充分使用Google调试； 从不同视角和维度来思考导致问题的来源，让后思考着尝试去解决